jQuery ASP.NET MVC Razor - 将数据发送到控制器

ASP.NET MVC Razor - Sending data to the controller

提问by Scott Norberg

There are all kinds of posts out there about getting the input fields off a form/div and sending them to your server side controller. What I am not clear on is how to accept the input at the controller.

有各种关于从表单/div 中获取输入字段并将它们发送到服务器端控制器的帖子。我不清楚的是如何接受控制器的输入。

I have tried various methods:

我尝试了各种方法：

function SendEMail( vThis )
{
    var vInput = $("#idEMailFields *").serializeArray();

    $.ajax({
        url: '@Url.Action( "SendEMail", "TournMaint")',
        data: JSON.stringify(vInput),
        type: 'POST',
        contentType: 'application/json; charset=utf-8;',
        dataType: 'json',
        success: function (response)
        {
            $("#idEMailResponse").html(response);
            return;
        },
        error: function( xhr, status, error )
        {
            debugger;
            var verr = xhr.status + "\r\n" + status + "\r\n" + error; 
            alert( verr );
        }   
    });
}

where the controller looks like:

控制器看起来像：

[HttpPost]
public JsonResult SendEMail( CNameValue [] inputs )
{
    String sView = "EMail messages queued"; 
    return Json( sView, JsonRequestBehavior.AllowGet );
}

The CNameValue class is my own creation since I didn't find a standard that would do the same thing. There should be a standard dictionary class that would pick the parameters up by name?? My question is how should this be done??

CNameValue 类是我自己创建的，因为我没有找到可以做同样事情的标准。应该有一个标准的字典类可以按名称选择参数？？我的问题是这应该怎么做？？

The Second variation:

第二种变体：

function SendEMail( vThis )
{
    var params = {};
    var v1 = $("#idEMailFields input[name=EMailAddressing], #idEMailFields input[type=hidden],#idEMailFields textarea");
    $(v1).each( function(index)
    {
        params[this.name]=this.value;
    });
    $.ajax({
        url: '@Url.Action( "SendEMail", "TournMaint")',
        data: JSON.stringify(params),
        type: 'POST',
        contentType: 'application/json; charset=utf-8;',
        dataType: 'json',
        success: function (response)
        {
            debugger;
            return;
        },
        error: function (x)
        {
            debugger;
            alert(x.status);
        }   
    });
}

Where the controller looks like:

控制器看起来像：

[HttpPost]
public JsonResult SendEMail( Int32 TournamentId, String EMailText, String EMailAddressing )
{
    String sView = "return something usefull";
    return Json( sView, JsonRequestBehavior.AllowGet );
}

This is not a bad way to move data to the sever but it is susceptible to changes in the razor markup causing the controller to blow. I know that you never get away from that problem but reducing the possibility is a thought.

这不是将数据移动到服务器的坏方法，但它容易受到导致控制器损坏的剃刀标记变化的影响。我知道你永远无法摆脱那个问题，但减少可能性是一种想法。

What is the best way to get screen data to the server side controller?

将屏幕数据获取到服务器端控制器的最佳方法是什么？

回答by Rafay

if you are using strongly typed views then all you have to do is

如果您使用的是强类型视图，那么您所要做的就是

 $.ajax({
        url: '@Url.Action( "SendEMail", "TournMaint")',
        data: {model:JSON.stringify(vInput)},
        type: 'POST',
   ...

and the controller looks like

控制器看起来像

[HttpPost]
public JsonResult SendEMail( CNameValue model )
{
    String prop = model.YourModelProperty; 

also you can use the form collection

您也可以使用表单集合

 $.ajax({
        url: '@Url.Action( "SendEMail", "TournMaint")',
        data: {col :$("Formid").serialize()},
        type: 'POST',
   ...

and the controller looks like

控制器看起来像

[HttpPost]
public JsonResult SendEMail( FormCollection col )
{
    String prop = col.Get("FormFieldName"); 

回答by Shaun Wilson

The .post() syntax @ http://api.jquery.com/jQuery.post/is nicer than .ajax imo. For example:

.post() 语法 @ http://api.jquery.com/jQuery.post/比 .ajax imo 更好。例如：

$(document).ready(function() 
{
    var model =
    {
        EmailAddress: 'Hello, World!'
    };

    var xhr = $.post('@Url.Action("SendEmail", "TournMaint")', model)
        .success(function(data)
        {
                    $('body').append('!success!');
                    $('body').append(JSON.stringify(data));
        })
        .error(function()
        {
                    $('body').append('!err!');
        })
        .complete(function()
        {
                    $('body').append('!complete!');
        });
    });

Your Controller could look like:

您的控制器可能如下所示：

    public class MyModel { public string EmailAddress { get; set; } };

    [HttpPost]
    public JsonResult SendEmail(MyModel model)
    {
        return new JsonResult { Data = model };
    }

The page should show the object you sent to the server, and show you order of execution for the success/error/complete calls.

该页面应显示您发送到服务器的对象，并显示成功/错误/完成调用的执行顺序。