Question

I have an Area like below.

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" />
}

Answer 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>