如何將鏈接項列表作為一個數據傳遞給.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 "});
    }