jquery - how to send partial view form without refreshing main form and load another partialview? -
hi have main form tow partial views in it: "_orderdetail" , "_orderdetaillist".
the "_orderdetaillist" have form named "orderdetailform".when submit orderdetailform's button, want send data action , return "_orderdetaillist" has bootstrap grid. want load "_orderdetaillist" in main form without refreshing page.
main form:
@using (html.beginform(null, null, formmethod.post, new { role = "form" ,id="mainform"})) { @html.antiforgerytoken() @html.validationsummary(true) /////some helpers... <div class="clr"></div> <div id="stufforderdetail"> @html.partial("_orderdetail") </div> <div id="stufforderdetail"> @html.partial("_orderdetaillist") </div> <div class="box-footer"> <input type="submit" value="ثبت" class="btn btn-primary" /> </div> }
_orderdetail partialview:
@using (html.beginform(null,null, formmethod.post, new { role = "form", @id = "orderdetailform" })) { @html.antiforgerytoken() @html.validationsummary(true) //some fields... <div class="box-footer"> <input type="submit" id="orderdetailaddbtn" value="اضافه" class="btnbtn-success" /> <input type="button" id="orderdetaildeletebtn" value="حذف" class="btn btn-danger" /> </div>
scripts:
<script src="~/scripts/jquery-1.11.1.min.js"></script> <script> $("#orderdetailform").submit(function (ev) { $.ajax({ url: '@url.action("addorderdetail", "orders", new { area = "adminsarea" })', type: 'post', success: function (result) { $("#stufforderdetaillist").html(result); } }); ev.preventdefault(); // return false; }); </script> @scripts.render("~/bundles/jqueryval")
actions:
[httppost] public actionresult addorderdetail(orderdetailviewmodel orderdetail) { list<orderdetailviewmodel> orderdetaillist = new list<orderdetailviewmodel>(); ////some code.... return partialview("_orderdetaillist", orderdetaillist); }
when click on "_orderdetail" submit button, mainpage refreshed , not action. how can solve that? thanks...
Comments
Post a Comment