Mvc 模态 Ajax 表单答案

【问题标题】：Mvc Modal Ajax FormMvc 模态 Ajax 表单
【发布时间】：2013-06-21 12:47:30
【问题描述】：

我的问题类似于this

我想要实现的是显示一个对话框，其中包含一个简单输入的表单。就像一篇文章的数量一样，当用户点击提交时，所有对话框应该做的就是关闭并提交数据而不重新加载整个页面。

这是表单加载的部分视图：

@model TRUNCATED.Models.AddToCartModel

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@using (Html.BeginForm("AddToCart", "Order", new AjaxOptions { // DO I NEED ANY? }))
{
    <fieldset>
        <legend>AddToCartModel</legend>

        <img src="@Url.Action("GetImage", "File", new { ArticleId = Model.ArticleId })" title="Artikelbild" style="resize:both; width: 300px; height:200px;" />

        <div class="editor-label">
            @Html.LabelFor(model => model.ArticleId)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ArticleId)
            @Html.ValidationMessageFor(model => model.ArticleId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Quantity)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Quantity)
            @Html.ValidationMessageFor(model => model.Quantity)
        </div>

        <p>
            <input type="submit" value="Add to Cart" />
        </p>

    </fieldset>
}

这是对话框js：

$("#dialog").dialog({
    autoOpen: false,
    resizeable: false,
    width: 350,
    height: 600,
    modal: true,
    show: {
        effect: "blind",
        duration: 300
    },
    hide: {
        effect: "blind",
        duration: 300
    },
    buttons: {
        "Close": function () {
            $(this).dialog("close");
        }
    }
});

$(".showDialog").on("click", function (e) {
    $('#dialog').load(this.href).dialog('open');
    return false;
});

这就是我打开对话框的方式：

@Html.ActionLink("Add to Cart", "AddToCart", 
new { id =item.ArticleId}, 
new { @class = "showDialog" }

在控制器中：

[HttpGet]
public ActionResult AddToCart(int id)
{
    return PartialView("_AddToCart", new AddToCartModel() { ArticleId = id });
}

[HttpPost]
public ActionResult AddToCart(AddToCartModel atm)
{   
    if (OrderData.CartItems.Count > 0)
        atm.Pos = OrderData.CartItems.Max(i => i.Pos) + 1;
    else 
        atm.Pos = 1;

    OrderData.CartItems.Add(atm);

    return // What goes here?
}

我是新手，我不知道我在这里做错了什么。我更换了 Hml。与阿贾克斯。但这并没有改变任何东西。

虽然它可以工作，但它会重新加载整个页面，这会产生一些副作用，比如 Webgrid 会背靠背设置，而不会。

【问题讨论】：

标签： c# jquery asp.net-mvc-4

【解决方案1】：

我认为您需要使用 Ajax.BeginForm 而不是 BeginForm 并在 Succcess 事件上调用关闭窗口函数。

@using (Ajax.BeginForm("Action", "Controller", new AjaxOptions { HttpMethod = "Post", OnSuccess = "CloseWindow()" }, new { id = "id", @class = "class" }))
{
}

如果您需要向用户添加一些消息，您可以在您的 POST 操作中实现此功能，例如

[HttpPost]
public ActionResult AddToCart(AddToCartModel atm)
{   
    if (OrderData.CartItems.Count > 0)
        atm.Pos = OrderData.CartItems.Max(i => i.Pos) + 1;
    else 
        atm.Pos = 1;

    OrderData.CartItems.Add(atm);

    return Content("<p>ITEM ADDED TO CART</p>");//will be returned by ajax
}

并使用 UpdateTargetId 修改您的 ajax 表单。消息将附加到具有此 ID 的元素

@using (Ajax.BeginForm("Action", "Controller", new AjaxOptions { UpdateTargetId = "Paceholder to message", HttpMethod = "Post", OnSuccess = "CloseWindow()" }, new { id = "form-catalog", @class = "form-horizontal" }))
{
}

【讨论】：

给我一个空白页面，上面写着“ITEM ADDED TO CART”，这意味着数据没有加载到 targetID div 中。
那不是 ajax。您使用的是 Ajax 表单吗？页面上为此添加了所有脚本？
您需要页面上的 jquery.unobtrusive-ajax.min.js 参考。
我忘记添加捆绑包“~/bundles/jqueryval”的加载。我确保它在包中，但没有确保包被加载-.-

【解决方案2】：

您没有向控制器执行 Ajax 发布请求，实际上您只是在对话框中加载表单的 PartialView，当您点击提交时，它会像往常一样提交。

您可以实现 Ajax.BeginForm 或使用 jQuery 捕获提交按钮上的点击事件并向控制器发出 Ajax 发布请求。

var values = $('#form-id').serialize();
$.ajax({
    url: 'path/to/controller/method',
    data: values,
    type: "POST",
    dataType: "json",
    data: values,
    success: function(result){
        // do something on success
    },
    error: function(){
        // do something on error
    }    
});

【讨论】：