如何将链接项列表作为一个数据传递给.net MVC中的控制器？

Question

我想将div（'111'...'555'）中的文本值与输入中的值一起传递给控制器​​。 我当时正在考虑将其包装在Json中。 但是不知道如何正确实施它。 有人有什么建议吗？

这是代码，

<div name="question" class="panel-body">
        111
        <label class="options">
            <span class="check-box"></span>
            <input type="radio" id="rating-1" name="rating" value="@model.value" />
        </label>
    </div>
    <div name="question" class="panel-body">
        222
        <label class="options">
            <span class="check-box"></span>
            <input type="radio" id="rating-2" name="rating" value="@model.value" />
        </label>
    </div>
    <div name="question" class="panel-body">
        333
        <label class="options">
            <span class="check-box"></span>
            <input type="radio" id="rating-3" name="rating" value="@model.value" />
        </label>
    </div>
    <div name="question" class="panel-body">
        444
        <label class="options">
            <span class="check-box"></span>
            <input type="radio" id="rating-4" name="rating" value="@model.value" />
        </label>
    </div>

谢谢！

Answer 1

将div值放在span class =“ div-value”中。 这样您就可以在jquery中轻松找到它。 为了提交给控制器，我在这里添加了一个按钮id =“ submit”

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <div name="question" class="panel-body">
       <span class="div-value"> 111 </span>
        <label class="options">
            <span class="check-box"></span>
            <input type="radio" id="rating-1" name="rating" value="@model.value" />
        </label>
    </div>
    <div name="question" class="panel-body">
       <span class="div-value"> 222 </span>
        <label class="options">
            <span class="check-box"></span>
            <input type="radio" id="rating-2" name="rating" value="@model.value" />
        </label>
    </div>
    <div name="question" class="panel-body">
       <span class="div-value"> 333 </span>
        <label class="options">
            <span class="check-box"></span>
            <input type="radio" id="rating-3" name="rating" value="@model.value" />
        </label>
    </div>
    <div name="question" class="panel-body">
      <span class="div-value">  444 </span>
        <label class="options">
            <span class="check-box"></span>
            <input type="radio" id="rating-4" name="rating" value="@model.value" />
        </label>
    </div>
  <button id="submit"> Action</button> 

<script>
$("#submit").on("click", function(){ 
   var singleObject = {}, listObject = [];
   $("div[name='question']").each(function(){
    singleObject = {};
    singleObject.divvalue = $("span[class='div-value']", this).text().trim();
    singleObject.radiovalue = $("input[type='radio']", this).val().trim();
    listObject.push(singleObject);

   });
    var jsonData = {};
    jsonData.ExamModel = listObject;
    var data = "{'model':" + JSON.stringify(jsonData) + "}";
 $.ajax({
          type: 'POST',
          contentType: "application/json; charset=utf-8",
          url: '/exam/save',
          dataType: 'json',
          data: data,
          success: function (data) {
              alert(data.Message);   
            },
            error: function (e) {
                 alert("Error Occurred")
            } 
       });
     });
 </script> 

这样制作视图模型

 public class ExamModel
       {
           public decimal divvalue { get; set; }
           public decimal radiovalue { get; set; }
       }
 public class ExamModelList
       {
           public List<ExamModel> ExamModel{ get; set; }

       }

在行动中做到这一点

public JsonResult Save(ExamModelList model)
    { 
        // Process Model Here 
        return Json(new {   Message = "response Message : Alhamdulillah worked "});
    }