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

Question

I want to pass the text values in the div('111'...'555') along with the values in the input to the controller. I was thinking of wrapping it up in a Json. But don't know how to implement it properly. Anyone has any advise?

here is the code,

<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>

Thanks!

Answer 1

Put div values in a span class="div-value". So that you can easily find this in jquery. For submitting to controller I have added here a button 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> 

Make View Model like this

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

       }

And in Action do like this

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