asp.net mvc - Facing issue while submitting Partial View using JQuery post -

asp.net mvc - Facing issue while submitting Partial View using JQuery post -

i have area below.

controller class

public class admincontroller : controller { // // get: /admin/admin/ [httppost] public actionresult index_partialpost(adminmodule model) { homecoming partialview("_partialpage1", model); } [httpget] public actionresult index_partial() { homecoming partialview("_partialpage1"); } [httpget] public actionresult index() { adminmodule model = new adminmodule(); model.myname = "my name"; homecoming view("index", model); } }

view

@model _1.areas.admin.models.adminmodule @{ viewbag.title = "index"; layout = "~/areas/admin/views/shared/_layoutpage1.cshtml"; } <h2> index</h2> <div id="myform"> <p id="pid"> </p> </div> <input id="btn" type="submit" value="button" /> <script language="javascript" type="text/javascript"> $('#btn').click(function(){ $('#pid').load("@url.action("index_partial", "admin")"); }); </script>

view

@model _1.areas.admin.models.adminmodule @{ viewbag.title = "index"; layout = "~/areas/admin/views/shared/_layoutpage1.cshtml"; } <h2> index</h2> <script src="/scripts/jquery-1.5.1.min.js" type="text/javascript"> </script> <div id="myform"> <p id="pid"> </p> </div> <input id="btn" type="submit" value="button" /> <script language="javascript" type="text/javascript"> $('#btn').click(function(){ $('#pid').load("@url.action("index_partial", "admin")"); }); </script>

partial view

@model _1.areas.admin.models.adminmodule @using (html.beginform()) { @html.labelfor(i => i.myname) @html.textboxfor(i => i.myname) @html.validationmessagefor(i => i.myname) <p id="getdatetimestring"> </p> <input type="submit" value="click here" id="btn" /> } <script language="javascript" type="text/javascript"> $('#btn').click(function () { var url = '@url.action("index_partialpost", "admin")'; $.post(url, null, function (data) { }); }); </script>

issue - when trying post partial view using jquery-post not working , giving 404. it's working ajax using below mentioned code of partial view

@model _1.areas.admin.models.adminmodule @using (ajax.beginform("index", "admin", new ajaxoptions { updatetargetid = "myform", httpmethod = "post" })) { @html.labelfor(i => i.myname) @html.textboxfor(i => i.myname) @html.validationmessagefor(i => i.myname) <p id="getdatetimestring"> </p> <input type="submit" value="click here" id="btn" /> }

you should cancel default action of form returning false click handler:

<script type="text/javascript"> $('#btn').click(function () { var url = '@url.action("index_partialpost", "admin")'; $.post(url, null, function (data) { }); homecoming false; }); </script>

if don't that, form submitted server , browser redirects target url leaving absolutely no time ajax request ever execute.

notice much improve subscribe .submit event of form in order perform ajax request instead of .click event of submit button. reason obvious: there other means submit form clicking on submit button. illustration pressing enter key while within input field. if happens ajax never execute.

so here's right way. start giving unique id form:

@using (html.beginform(null, null, formmethod.post, new { id = "myform" })) { @html.labelfor(i => i.myname) @html.textboxfor(i => i.myname) @html.validationmessagefor(i => i.myname) <p id="getdatetimestring"> </p> <input type="submit" value="click here" id="btn" /> }

and unobtrusively ajaxify form:

<script type="text/javascript"> $('#myform').submit(function () { $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function(result) { } }); homecoming false; }); </script>

asp.net-mvc asp.net-mvc-3 razor