Facing issue while submitting Partial View using JQuery post

Question

I have an Area like below.

enter image description here

Controller Class

public class AdminController : Controller
{
    //
    // GET: /Admin/Admin/
    [HttpPost]
    public ActionResult Index_partialPost(AdminModule model)
    {
        return PartialView("_PartialPage1", model);
    }

    [HttpGet]
    public ActionResult Index_partial()
    {
        return PartialView("_PartialPage1");
    }

    [HttpGet]
    public ActionResult Index()
    {
        AdminModule model = new AdminModule();
        model.MyName = "My Name";
        return 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 is - When trying to post the partial view using jQuery-post not working and giving 404. It's working with 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" />
}

possible duplicate of Facing issue while rendering the Partial view using JQuery — Dismissile
– Dismissile, Commented Feb 6, 2013 at 14:56
@Dismissile no, it was get and this is post and completely different situation. — SMC
– SMC, Commented Feb 6, 2013 at 15:00

Darin Dimitrov · Accepted Answer · 2013-02-06 14:54:27Z

1

You should cancel the default action of the form by returning false from your click handler:

<script type="text/javascript">
    $('#btn').click(function () {
        var url = '@Url.Action("Index_partialPost", "Admin")';
        $.post(url, null, function (data) {
        });
        return false;
    });
</script>

If you don't do that, the form is submitted to the server and the browser redirects to the target url leaving you absolutely no time for your AJAX request to ever execute.

Notice that it is much better to subscribe to the .submit event of the form in order to perform the AJAX request instead of the .click event of the submit button. The reason for this is obvious: there are other means to submit a form than clicking on a submit button. For example pressing the Enter key while inside an input field. If this happens your AJAX will never execute.

So here's the correct way. Start by giving an unique id to your 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 then you could unobtrusively AJAXify this form:

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

            }
        });
        return false;
    });
</script>

answered Feb 6, 2013 at 14:54

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SMC Over a year ago

Now it is not showing the required field validation message error. Crash is fixed.

Darin Dimitrov Over a year ago

Well, in the success callback of your AJAX method you don't seem to be doing anything => it's absolutely empty. What did you expect to happen if you don't write code for it? If you want some messages to appear you should refresh the corresponding section in the success function from the partial result returned by the server: $('#someContainerDivForYourPartial').html(result);.

SMC Over a year ago

$('#myForm').html(result); did the job

Céryl Wiltink · Accepted Answer · 2013-02-06 14:58:17Z

0

I think you need to define the Area in the routeparameter where you do @Url.Action in your partial view:

$('#btn').click(function () {
        var url = '@Url.Action("Index_partialPost", "Admin", new { area = "Admin"})';
        $.post(url, null, function (data) {
        });
});

Else it will be posted to your main (root) Area where you probably don't have a AdminController...

You can doublecheck the url in the JS your HTML source when the form is rendered, it sould read "/Admin/Admin/Index_partialPost" instead of just "/Admin/Index_partialPost"

answered Feb 6, 2013 at 14:58

Céryl Wiltink

1,91912 silver badges16 bronze badges

Collectives™ on Stack Overflow

Facing issue while submitting Partial View using JQuery post

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related