0

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

在此处输入图像描述

控制器类

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

2 回答 2

1

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

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

如果您不这样做，表单将提交到服务器，并且浏览器将重定向到目标 url，让您绝对没有时间执行 AJAX 请求。

请注意，订阅表单的 .submit 事件以执行 AJAX 请求而不是提交按钮的 .click 事件要好得多。原因很明显：除了单击提交按钮之外，还有其他方法可以提交表单。例如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" />
}

然后你可以不显眼地 AJAXify 这个表单：

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

            }
        });
        return false;
    });
</script>
于 2013-02-06T14:54:27.767 回答
0

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

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

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

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

于 2013-02-06T14:58:17.570 回答