title: calling an Action in the Controller through JQuery from the cshtml and returning a value back
body: <p>I have a cshtml page, with 3 text boxes and 3 dropdowns.</p>
  
  <p>My idea is to have the user make a decision on the first question dropdown (YES/NO), and depending on this answer, populate the second text box, and enable the second dropdown (YES/NO), and same process for the third textbox.</p>
  
  <p>I have the following at the moment:-</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(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);
          });
      }
  
  
  });
  
  &lt;/script&gt;
  
  @using (Html.BeginForm("Decision", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
  
  {
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt; &lt;font face="Arial" size="2"&gt;&lt;b&gt;1&lt;/b&gt;&lt;/font&gt;
          &lt;/td&gt;
          &lt;td&gt;
             @Html.TextBox("T_FirstQuestion", ViewData["T_FirstQuestion"], new { @class = "NormalTextBox" })
          &lt;/td&gt;
          &lt;td&gt;
             @Html.DropDownList("FirstQuestYesNo", ViewData["FirstQuestYesNoData"] as SelectList, new { @class = "normalDropdowns" })
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt; &lt;font face="Arial" size="2"&gt;&lt;b&gt;1&lt;/b&gt;&lt;/font&gt;
          &lt;/td&gt;
          &lt;td&gt;
             @Html.TextBox("T_SecondQuestion", ViewData["T_SecondQuestion"], new { @class = "NormalTextBox" })
          &lt;/td&gt;
          &lt;td&gt;
             @Html.DropDownList("SecondQuestYesNo", ViewData["SecondQuestYesNoData"] as SelectList, new { @class = "normalDropdowns" })
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt; &lt;font face="Arial" size="2"&gt;&lt;b&gt;1&lt;/b&gt;&lt;/font&gt;
          &lt;/td&gt;
          &lt;td&gt;
             @Html.TextBox("T_ThirdQuestion", ViewData["T_ThirdQuestion"], new { @class = "NormalTextBox" })
          &lt;/td&gt;
          &lt;td&gt;
             @Html.DropDownList("ThirdQuestYesNo", ViewData["ThirdQuestYesNoData"] as SelectList, new { @class = "normalDropdowns" })
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  }
  </code></pre>
  
  <p>and my Controller is as follows :-</p>
  
  <pre><code>        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();
      }
  </code></pre>
  
  <p>I am managing to get the value of the first dropdown, and redirecting to the Decision action, however I am not getting the second question textbox filled up. Also I am getting like a popup with some HTML code, which I would like to avoid.</p>
  
  <p>So basically my question is, how can I fill up the second text box, and after the user chooses the (YES/NO), then fill up the third textbox.</p>
  
  <p>Also, am I using the correct approach or is there a better way to do this using MVC?</p>
  
  <p>Thanks for your help and time!</p>
  
  <p>-------------------UPDATE--------------------------------------------
  I decided to go for a more easy example</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
  
      $("#YesNo").change(function () {
          val = $("#YesNo").val();
          var url = "../Home/Decision";
          $.post(url, { value: val});
  
      });
  
  
  
  });
  
  &lt;/script&gt;
  
  @using (Html.BeginForm("Decision", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id="Decision" }))
  {
  
  @Html.DropDownList("YesNo", new List&lt;SelectListItem&gt;
                       {
                          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" })   
  }
  </code></pre>
  
  <p>And the Controller Actions:-</p>
  
  <pre><code>        [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();
      }
  </code></pre>
  
  <p>The problem now is that I am getting the ViewBag.FirstQuestData populating correctly, however it is not displayed in the @Html.TextBox</p>
  
  <p>-----------------------------------JSON UPDATE---------------------------------------
  cshtml</p>
  
  <pre><code>        $("#YesNoQuest1").change(function () {
          alert('change');
          val = $("#YesNoQuest1").val();
          var url = "../Home/Decisions1";
          $.getJSON(url, function(data) {
               alert(data.message);
          });
  </code></pre>
  
  <p>controller</p>
  
  <pre><code>        [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);
      }
  </code></pre>