Calling an action in the controller via jQuery from cshtml and returning the value back

Question

I have a cshtml page with 3 text fields and 3 drop-down lists.

My idea is for the user to make a decision on the first question of the drop-down list (YES / NO), and depending on this answer, fill in the second text box and include the second drop-down list (YES / NO) and the same process for the third text box .

At the moment I have the following: -

<script type="text/javascript"> $(document).ready(function () { //disable the textboxes $("#T_FirstQuestion").attr('disabled', true); $("#T_SecondQuestion").attr('disabled', true); $("#T_ThirdQuestion").attr('disabled', true); //and the dropdowns intially $("#SecondQuestYesNo").attr('disabled', true); $("#ThirdQuestYesNo").attr('disabled', true); $("#FirstQuestYesNo").change(function () { val = $("#FirstQuestYesNo").val(); PostValue(val); }); function PostValue(val) { var url = "/Home/DecisionFirstQuest"; $("#T_SecondQuestion").attr('enabled', true); $.ajax({ type: "POST", url: url, data: { value: val } }).done(function (msg) { alert("Data Saved: " + msg); }); } }); </script> @using (Html.BeginForm("Decision", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) { <table> <tr> <td> <font face="Arial" size="2"><b>1</b></font> </td> <td> @Html.TextBox("T_FirstQuestion", ViewData["T_FirstQuestion"], new { @class = "NormalTextBox" }) </td> <td> @Html.DropDownList("FirstQuestYesNo", ViewData["FirstQuestYesNoData"] as SelectList, new { @class = "normalDropdowns" }) </td> </tr> <tr> <td> <font face="Arial" size="2"><b>1</b></font> </td> <td> @Html.TextBox("T_SecondQuestion", ViewData["T_SecondQuestion"], new { @class = "NormalTextBox" }) </td> <td> @Html.DropDownList("SecondQuestYesNo", ViewData["SecondQuestYesNoData"] as SelectList, new { @class = "normalDropdowns" }) </td> </tr> <tr> <td> <font face="Arial" size="2"><b>1</b></font> </td> <td> @Html.TextBox("T_ThirdQuestion", ViewData["T_ThirdQuestion"], new { @class = "NormalTextBox" }) </td> <td> @Html.DropDownList("ThirdQuestYesNo", ViewData["ThirdQuestYesNoData"] as SelectList, new { @class = "normalDropdowns" }) </td> </tr> </table> } 

and my controller is as follows: -

  public ActionResult DecisionFirstQuest(string value) { string strMessage = ""; if (value == "Yes") { strMessage = "You have chosen YES!"; } else { strMessage = "You have chosen NO!"; } ViewData["T_SecondQuestion"] = strMessage; return RedirectToAction("Decision"); } public ActionResult DecisionSecondQuest(string value) { string strMessage = ""; if (value == "Yes") { strMessage = "You have chosen YES!"; } else { strMessage = "You have chosen NO!"; } ViewData["T_ThirdQuestion"] = strMessage; return RedirectToAction("Decision"); } public ActionResult Decision() { string FirstQuestYesNo = HttpContext.Request["FirstQuestYesNo"]; ViewData["T_FirstQuestion"] = "First Question Text"; var ddlYesNoData = new SelectList(new[] { new {ID="",Name="Please Select"}, new {ID="Yes",Name="Yes"}, new{ID="No",Name="No"}, }, "ID", "Name", 1); if (!String.IsNullOrEmpty(FirstQuestYesNo)) ViewData["FirstQuestYesNoData"] = FirstQuestYesNo; else ViewData["FirstQuestYesNoData"] = "Yes"; ViewData["FirstQuestYesNoData"] = ddlYesNoData; ViewData["SecondQuestYesNoData"] = ddlYesNoData; ViewData["ThirdQuestYesNoData"] = ddlYesNoData; return View(); } 

I manage to get the value of the first drop-down list and redirect to the "Solution" action, however I will not get the second text block of questions. I also get as a popup with some HTML code, which I would like to avoid.

So, basically, my question is: how can I fill in the second text box and after the user selects (YES / NO), then fill in the third text box.

Also, am I using the right approach or is there a better way to do this using MVC?

Thanks for your help and time!

------------------- UPDATE --------------------------- --- -------------- I decided to go for a simpler example

 <script type="text/javascript"> $(document).ready(function () { $("#YesNo").change(function () { val = $("#YesNo").val(); var url = "../Home/Decision"; $.post(url, { value: val}); }); }); </script> @using (Html.BeginForm("Decision", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id="Decision" })) { @Html.DropDownList("YesNo", new List<SelectListItem> { new SelectListItem{ Text="Select", Value = "" }, new SelectListItem{ Text="Yes", Value = "Yes" }, new SelectListItem{ Text="No", Value = "No" } }) string FirstQuestText = ViewBag.FirstQuestData; @Html.TextBox("T_FirstQuestion", FirstQuestText, new { @class = "NormalTextBox" }) } 

And controller actions: -

  [HttpPost] public ActionResult Decision(string value) { string strMessage = ""; if (value == "Yes") { strMessage = "This is the Second Yes Question"; } else { strMessage = "This is the Second No Question"; } ViewBag.FirstQuestData = strMessage; return View(); } 

Now the problem is that I am loading ViewBag.FirstQuestData correctly, however it does not appear in @ Html.TextBox

----------------------------------- JSON UPDATE ---------- --- -------------------------- cshtml

  $("#YesNoQuest1").change(function () { alert('change'); val = $("#YesNoQuest1").val(); var url = "../Home/Decisions1"; $.getJSON(url, function(data) { alert(data.message); }); 

controller

  [HttpPost] public JsonResult Decisions1(string value) { string strMessage = ""; if (value == "Yes") { strMessage = "This is the Second Yes Question"; } else { strMessage = "This is the Second No Question"; } return Json(new { message = strMessage }, JsonRequestBehavior.AllowGet); } 

Answer 1

Try returning data based on rows instead of redirecting to action, as shown below:

 [HttpPost] public ActionResult Decision(string value) { string strMessage = ""; if (value == "Yes") { strMessage = "This is the Second Yes Question"; } else { strMessage = "This is the Second No Question"; } ViewBag.FirstQuestData = strMessage; return Content(strMessage); //No need to return complete View } 

This message can be received in an Ajax message, as shown below:

  $("#YesNo").change(function () { val = $("#YesNo").val(); var url = "../Home/Decision"; $.post(url, { value: val},function(data){ alert(data); //Here you can right your logic to manipulate data }); }); 

Hope this helps:

------- UPDATE to use JSON data ------------------- Here is the controller to return Json:

 [HttpGet] public ActionResult YourController() { //Do your Logic return Json(new { message = "Data" }, JsonRequestBehavior.AllowGet); } $.getJSON("../YourController", function(data) { alert(data.foo); alert(data.baz); }); 

Answer 2

If you use the "Json result" to return a response from Controller to View, specify the data type as "json" in the Ajax setting as

 function PostValue(val) { var url = "/Home/DecisionFirstQuest"; $("#T_SecondQuestion").attr('enabled', true); $.ajax({ type: "POST", url: url, dataType:'json', data: { value: val } }).done(function (msg) { alert("Data Saved: " + msg); }); } 

and you can get the result in your msg object.

Note. Do not use getJSON () as cache responses that may cause your data to not sync with your repository. But you can still use it with setinb cache = FALSE in ajax setup like this:

$ ajaxSetup ({cache: false}) ;.

This line must precede your ajax call.

thanks