How to pass a list of linked items as one data to controller in .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!

You view makes no sense. You have a set of radio button that all have the same value. Why are you wanting to do with this - the server generated those values, so why would you need to send them back again? — , Jan 25 '17 at 04:23
can you add some javascript or jquery code what you tried ? you tried using object ? — Ameya Deshpande, Jan 25 '17 at 04:26
Because I want to save them after the user chooses the answer. @Stephen Muecke — Wilheim, Jan 25 '17 at 20:00
Again, the view does not makes sense. You should explain in your question exactly what you trying to do. If you have a `Question` with a set of possible `Answers` (multiple choice) for each `Question` and you want to select one with a radio button, then [this answer](http://stackoverflow.com/questions/28055287/asp-net-mvc-5-group-of-radio-buttons/28057533#28057533) might help (but its not clear what your trying to do) — , Jan 25 '17 at 21:41

Muhammad Ashikuzzaman · Accepted Answer · 2017-01-26T04:58:20.113

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 "});
    }

thanks so much! Can I ask that is ajax the only way to pass the values to the controller based on this html or is there another way of doing this? @Muhammad Ashikuzzaman — Wilheim, Jan 25 '17 at 08:40
If you want to pass list I know that it is the best way. Did you test that. — Muhammad Ashikuzzaman, Jan 25 '17 at 08:44
Not yet, I can't access the code here, I will test it first thing tomorrow and let you know the result. Thanks! @Muhammad Ashikuzzaman — Wilheim, Jan 25 '17 at 08:54

How to pass a list of linked items as one data to controller in .net mvc?

1 Answers1