c# - 重定向到 Jquery 中的 Action-Controller MVC 4

Question

我在这方面需要一点帮助，因为我对 AJAX 总体上还很陌生。在我拥有的给定页面(一个 View )中，我显示了一个按钮，它会弹出一个表单。我最终想要的是将该表单中的数据输入传递到我的应用程序内的 Controller 。我知道有很多关于如何做到这一点的教程......但是，我似乎无法理解这是如何完成的;因此，我想一步一步地遍历这个。我只是想在用户单击对话框上的“保存”按钮后显示不同的 View 。我希望这是清楚的。这是我的 HTML + jQuery

@model AccommodationEditViewModel

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<table>
    <tr>
        <td>
        @Html.ActionLink("Back to list", "List", "Accommodation")
        </td>
    </tr>
    <tr>
        <td>    
            @if ( Model.Accommodation.LocaleID != Guid.Empty)
            {
                @Html.DisplayAccommodation(IAccommodationDisplay);
            }
        </td>
    </tr> 
</table>

<div class="genericform">
<form id="form" method="post">

    @Html.AccommodationEditDisplay()
<table>
    <tr>
        <td>
            @Html.ActionLink("Add New Address", "", "", new { id = "addaddresses" }, null)
        </td>
    </tr>
    @if (Model != null && Model.Accommodation.Addresses.Count() == 0)
    {
        <tr>
            <td>
                This Locale Contains No Addresses
            </td>
        </tr>
    }
    else
    {
        foreach (Address address in Model.Accommodation.Addresses)
        { 
            <tr>
                <td>
                    @address.Address1
                </td>
            </tr>
        }
    }
</table>
<br /> <br />
<input type="submit" name="command" value="Save"  />
<input type="submit" name="command" value="Delete" />
</form>
</div>

<button id="opener">Add Address</button>

<div id="dialog" title="Add Address" style="display:none;">
<label for="Address1">Address: </label><input id="Address1" />
<label for="Address2">Address 2: </label><input id="Address2" /> 
<label for="City">City: </label><input id="City" />
<label for="State">State: </label><input id="State" />
<label for="PostalCode">Postal Code: </label><input id="PostalCode" />
</div>

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.20.js"></script>
<link type="text/css" href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet"  />

<script type="text/javascript">    
$(document).ready(function () {
        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "explode",
                duration: 250
            },
            hide: {
                effect: "explode",
                duration: 250
            },
            buttons: {
                "Save": {
                    text: "Save",
                    class: "",
                    click: function () {
                         //**redirect here**
                        $(this).dialog("close");

                    }},
                "Cancel": {
                    text: "Cancel",
                    class: "",
                    click: function () {
                    $(this).dialog("close");
                }
            }},
            modal: true
        });

        $("#opener").click(function () {
            $("#dialog").dialog("open");
        });
    });
</script>

我试过使用 $.ajax({}) 并设置它:Url: "/Areas/Website/Controller/Action但此时脚本停止工作。任何帮助表示赞赏!谢谢!

编辑

我什至需要使用 AJAX 吗？我只是想以那种形式(在对话框内)将信息传递给 Controller ​​。

Answer 1

好的，尝试更换您的 <form id="form" method="post"> form fields </form>与

@using (Html.BeginForm("NameOfControllerMethod", "NameOfControllerClass")) 
{
<!-- fields for gathering data, your input fields essentially -->
}

然后您需要转到您的 Controller 类，并在您的 Controller 方法上方添加 [HttpPost]，如下所示:

[HttpPost]
public ActionResult MethodName(AccomodationEditViewModel viewModel) {
//do stuff in here with the viewModel, for example viewModel.Location, or viewModel.Name
}

注意 [HttpPost] 要求您在 Controller 类的顶部添加一个新的“using”插入。

NameOfControllerMethod 是上面有 HttpPost 的方法。 Controller 类的名称类似于“MyClass”，例如来自名为 MyClassController 的 Controller 。