Question

我的问题与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。与Ajax。但这并没有改变任何事情。

虽然有效，但它会重新加载整个页面，这会产生副作用，就像Webgrid背靠背一样，什么不是。

Answer 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" }))
{
}

Answer 2

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

您可以使用jQuery实现Ajax.BeginForm或在提交按钮上捕获click事件，并向控制器发出Ajax Post Request。

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

Mvc Modal Ajax表格

2 个答案: