Question

我需要一些帮助，因为我对AJAX很新。在我拥有的给定页面（视图）中，我显示了一个显示表单的按钮。我最终想要的是将该表单中的数据输入传递给我的应用程序内的控制器。我知道有很多教程如何在那里做...但是，我似乎有一个问题，了解如何做到这一点;因此，我想逐步遍历这一过程。我只是想在用户点击对话框上的“保存”按钮后显示不同的视图。我希望这很清楚。这是我的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吗？我只想将该表单中的信息（在对话框内）传递给控制器。

Answer 1

试试这个：

window.location = "/Areas/Website/Controller/Action";

在点击功能中。

Answer 2

好的，请尝试用{/ 1>替换<form id="form" method="post"> form fields </form>

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

那么你需要去你的控制器类，并在你的控制器方法之上添加[HttpPost]，如下所示：

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

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

NameOfControllerMethod是在其上方具有HttpPost的方法。控制器类的名称类似于“MyClass”，来自名为MyClassController的控制器，作为示例。

在Jquery中重定向到Action-Controller MVC 4

2 个答案: