Question

我有一个像下面这样的区域。

enter image description here

控制器类

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);
    }
}

查看

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

查看

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

部分视图

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

问题是 - 尝试使用jQuery-post工作时发布局部视图并给出404.它使用下面提到的部分视图代码与Ajax一起工作

@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

您应该通过从点击处理程序返回false来取消表单的默认操作：

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

如果您不这样做，表单将提交给服务器，浏览器会重定向到目标网址，这样您就无需花时间执行AJAX请求。

请注意，为了执行AJAX请求而不是提交按钮的.click事件，订阅表单的.submit事件要好得多。原因很明显：提交表单还有其他方法，而不是点击提交按钮。例如，在输入字段内按 Enter 键。如果发生这种情况，你的AJAX永远不会执行。

所以这是正确的方法。首先为表单提供唯一ID：

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

然后你可以不引人注意地AJAX化这种形式：

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

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

Answer 2

我认为您需要在路线参数中定义您在局部视图中执行@ Url.Action的区域：

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

否则它将被发布到您可能没有AdminController的主（根）区域......

您可以在呈现表单时双重检查JS HTML源代码中的URL，它应该是“/ Admin / Admin / Index_partialPost”而不是“/ Admin / Index_partialPost”

使用JQuery帖子提交部分视图时遇到问题

2 个答案: