Currently, partial is getting submitted using AJAX after submit button click in main view. But I do not want the same partial to redirect after submission. How can I get rid off this. I am new to MVC so do not have much ideas. I have simply returned the partials in [HttpPost] ActionResult. I think, this is not correct way of doing this. Please guide me.
What I have tried:
Controller
[HttpPost]
public ActionResult Home(ClsAA clsAA)
{
ModelState.Clear();
if (Id == "Z01")
{
return PartialView("~/Views/Home/_P.cshtml", clsAA);
}
else if (Id == "P02")
{
return PartialView("~/Views/Home/_I.cshtml", clsAA);
}
return PartialView();
}
Main View
<table>
<tr>
<th>@Html.DisplayNameFor(m => m.ProductName)</th>
<th>@Html.DisplayNameFor(m => m.ProductDetail)</th>
<th>@Html.DisplayNameFor(m => m.ProductCost)</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>@Html.DisplayFor(modelItem => item.ProductName)</td>
<td >@Html.DisplayFor(modelItem => item.ProductDetail)</td>
<td>@Html.DisplayFor(modelItem => item.ProductCost)</td>
<td><input class="search btn-default" type="button" value="Select" data-assigned="@item.ProductCode"/></td>
</tr>
}
</table>
<div id="MyReports">
@using (Html.BeginForm("Home", "Home", FormMethod.Post, new { id = "myform" }))
{
<div id="mypartial"></div>
<button type="submit" id="submit">Run</button>
}
</div>
This is how Partial loads
$('.search').click(function () {
var id = $(this).data('assigned');
var route = '@Url.Action("PartialView", "Home")?id=' + id;
$('#mypartial').load(route)
});
Partial View
<div class="PContainer">
<label>
@Html.RadioButtonFor(m => m.HDT, "H", new { @checked = "checked" })H
</label>
<label>
@Html.RadioButtonFor(m => m.HDT, "T")T
</label>
</div>
<div class="P">
<div id="H" class="PHT">
@Html.TextBoxFor(m => m.txtH)
</div>
<div id="T" class="PHT">
@Html.TextBoxFor(m => m.txtT)
</div>
</div>
Scripts for submit
$(document).ready(function () {
var url = '@Url.Action("Home")';
$('#myform').submit(function () {
if (!$(this).valid()) {
return;
}
$.post(url, $(this).serialize(), function (response) {
debugger;
$('#mypartial').html(response);
$("#myModal").modal('show');
});
return false;
})
});