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.
Scripts for submit
- $(document).ready(function () {
- var url = '@Url.Action("Home")';
- $('#myform').submit(function () {
- if (!$(this).valid())
- { return; }
- $.post(url, $(this).serialize(), function (response)
- {
- $('#mypartial').html(response);
- $("#myModal").modal('show'); });
- return false;
- })
- });
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="P"> <div id="H" class="PHT">
- @Html.TextBoxFor(m => m.txtH)
- </div>
- <div id="T" class="PHT">
- @Html.TextBoxFor(m => m.txtT)
- </div>