1

我需要一点帮助，因为我对 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 但脚本在那时停止工作。任何和所有的帮助表示赞赏！谢谢！

编辑

Do I even need to use AJAX at all? I just want to pass the information in that form (inside the dialog) to a controller.

4

2 回答 2

2

Try this:

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

inside your click function.

于 2013-05-07T20:06:13.987 回答
2

Ok, try replacing your <form id="form" method="post"> form fields </form> with 

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

THEN you need to go to your controller class, and add [HttpPost] above your controller method, like this:

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

NOTE that the [HttpPost] requires that you add a new "using" insert at the top of your controller class.

The NameOfControllerMethod is the method that has the HttpPost above it. The name of the controller class is like "MyClass", coming from the controller named MyClassController, as an example.

于 2013-05-07T20:46:57.500 回答