C# MVC 使用 dotnetfiddle 将参数从视图传递到控制器

Posted 2023-04-01

【中文标题】C# MVC 使用 dotnetfiddle 将参数从视图传递到控制器

【英文标题】：C# MVC pass parameters from View to Controller using dotnetfiddle

【发布时间】：2021-10-08 12:10:49

【问题描述】：

我正在学习使用 dotnetfiddle web 编写代码的 C# MVC。 我已经使用 MVC 类型的默认代码 dotnetfiddle 创建了一个新项目，但我想在警报中显示 question 而不是 answer。

我想知道如何从视图向控制器传递参数。

这是ajax方法：

$.ajax(
    url: '@Url.RouteUrl(new action="GetAnswer", controller="Home")',
    data: JSON.stringify(Answer: '', Question: $('#Question').val()),
    type: 'POST',
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success: function(resp) 
        openAlert(resp.result);
    ,
    error: function(XMLHttpRequest, textStatus, errorThrown)  
            openAlert("ERROR: " + errorThrown); 
    
);

这是控制器方法：

[HttpPost]
public JsonResult GetAnswer(string question)
               
    int index = _rnd.Next(_db.Count);
    var answer = _db[index];
    return Json(new  result = question);

你可以在这里检查和测试代码：dotnetfiddle（编辑：如果它在这里工作，那将是一个很好的答案）

【问题讨论】：

为了发送 JSON，你需要 data: JSON.stringify(Answer: '', Question: $('#Question').val()), 或者 jQuery 将发送 Answer=&Question=xyz 代替

我已经将data: Answer: '', Question: $('#Question').val(), 更改为data: JSON.stringify(Answer: '', Question: $('#Question').val()),，但我在控制器中得到了一个空变量。

可能重复：How to pass json POST data to Web API method as an object?

对我不起作用。也许错误是另一个原因，但我怀疑它是由 dotnetfiddle 自动生成的示例代码。

【参考方案1】：

这些代码更改对您有用。如果你想验证检查小提琴。 DotNetFiddle

客户端更改

                $.ajax(
                    url: '@Url.RouteUrl(new action="GetAnswer", controller="Home")',
                    data: "Answer": '', "Question": $('#Question').val(),
                        type: 'POST',
                        success: function(resp) 
                            openAlert(resp.Question);
                        ,
                        error: function(XMLHttpRequest, textStatus, errorThrown)  
                            openAlert("ERROR: " + errorThrown); 
                        
                    );

服务器端更改

[HttpPost]
        public JsonResult GetAnswer(SampleViewModel model)
                       
            int index = _rnd.Next(_db.Count);
            var answer = _db[index];
            return Json(model);
        

【参考方案2】：

您在操作中获得了问题的值，因为您的操作中有一个参数 string question。

你需要做的是：

从视图发送一个 json 对象 在操作用户中，模型具有两个属性（答案和问题），用于获取视图发送的值 然后在操作中决定需要发送哪些数据以供查看

查看： 将 JSON 对象发送到操作：

JSON.stringify(Answer: '', Question: $('#Question').val())

当你得到控制器返回的数据时：

openAlert(resp.Answer);

控制器：

public JsonResult GetAnswer(MyQA model)

    // model.Answer
    // model.Question
    // Your business logic goes here

    return Json(new  result = model);

这是 MyQA 类：

public class MyQA

    public string Answer  get; set; 
    public string Question get; set; 

【讨论】：

我已经完成了您建议的更改，但警报仍然不起作用。请在浏览器中查看：dotnetfiddle

@Kaido 你能指出你面临的问题吗？您遇到了什么错误？

【参考方案3】：

dotnetfiddle 这行有问题：contentType: "application/json; charset=utf-8",

将脚本更改为：

$('.submit').click(function() 
  if ($('form').valid()) 
    $.ajax(
      url: '@Url.Action("GetAnswer", "Home")',
      data: 
        Answer: '',
        Question: $('#Question').val()
      ,
      type: 'POST',
      dataType: 'json',
      success: function(resp) 
        openAlert('Answer :' + resp.Answer + ' -----Question : ' + resp.Question);
      ,
      error: function(XMLHttpRequest, textStatus, errorThrown) 
        openAlert("ERROR: " + textStatus);
      
    );
   else 
    closeAlert();
  
);

将操作GetAnswer 更改为：

[HttpPost]
public JsonResult GetAnswer(string Answer,string Question)
               
   int index = _rnd.Next(_db.Count);
     var answer = _db[index];
     return Json(new Answer = answer,Question = Question);

【参考方案4】：

这是我用来向控制器传递参数的方法

首先，将要传递的参数分配给一个变量，其值来自 dotnetfiddle 中所述的输入 id

var questionParam = $("#Question").val();

那么对于传递给AJAX，我认为你的方法已经是正确的，我就是这样做的

$.ajax(
    url: '/Home/GetAnswer?question=' + questionParam ,
    type: 'POST',
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success: function(resp) 
        openAlert(resp.result);
    ,
    error: function(XMLHttpRequest, textStatus, errorThrown)  
            openAlert("ERROR: " + errorThrown); 
    
);

此方法在我的项目中适用于我，如果值是字符串，我认为您不需要对值进行字符串化。

我也是一个初学者，所以也许我的方法是错误的或者不是最好的方法，我希望它可以帮助你。

【讨论】：

您将问题（未转义的顺便说一句）作为 GET 参数插入，而不是作为 POST 参数。

如果我这样做，我会得到一个 sintex 错误。我提供了一个源代码来测试它而无需安装任何东西。