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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16426890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 04:37:29  来源:igfitidea点击:

Redirect to Action-Controller MVC 4 inside Jquery

c#javascriptjqueryasp.net-mvc-4razor

提问by Jose

I need a little help with this since I am very new to AJAX in general. In a given page that I have (a view) I display a button which brings up a form. What I ultimately want is to pass the data input in that form to a controller inside my application. I know there are plenty of tutorials on how to do it out there...however, I seem to have a problem understanding how this is done; therefore, I want to traverse this step-by-step. I just simply want to display a different view after the user clicks on the "Save" button on the dialog. I hope that is clear. Here is my HTML + jQuery

我需要一点帮助,因为我对 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>

I have tried using $.ajax({}) and setting this: Url: "/Areas/Website/Controller/Actionbut scripting stops working at that point. Any and all help is appreciated! Thank you!

我曾尝试使用 $.ajax({}) 并进行设置:Url: "/Areas/Website/Controller/Action但脚本在那时停止工作。任何和所有的帮助表示赞赏!谢谢!

EDIT

编辑

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.

我什至需要使用 AJAX 吗?我只想将这种形式的信息(在对话框内)传递给控制器​​。

回答by barnacle.m

Try this:

试试这个:

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

inside your click function.

在您的点击功能中。

回答by barnacle.m

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

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

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

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

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

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

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

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

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.

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