1

我的问题与此类似

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

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

@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 会背靠背设置，等等。

4

2 回答 2

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" }))
{
}
于 2013-06-21T13:03:15.253 回答
0

您没有对控制器执行 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
    }    
});
于 2013-06-21T13:22:27.067 回答