ASP.NET MVC - Master / Detail Posting

Question

Hello,

I am new to ASP.NET MVC. I am trying to create what I thought was a basic functionality. I have a view that is accessed via "http://myserver.com/Products/Ship/". When a user visits this page, they will be prompted for the serial number of a product. After a user enters the serial number and clicks "next", I want to show them a drop down list of shipping options. I want to do this while keeping them at the "http://www.myserver.com/Products/Ship" url. Because of this, I thought JQuery would be a suitable answer. In the process, I have run into a problem. I cannot get to the second page as desired.

For reference, my view code looks like this:

  <h2>Product Shipping</h2>
  <p><form id="myForm" action="/Products/Ship" method="post">
    <fieldset>               
      Product
      <%= Html.TextBox("product", null, new{@class = "required product"}) %> 

      <br />

      <input type="submit" value="OK" />        
    </fieldset>        
  </form></p>

  <script type="text/javascript">
    $(document).ready(function () {
        $("#myForm").validate({ submitHandler: submitSerialNumber });
    });

    function submitSerialNumber () {
        $post("/Products/Ship", "", function(result) { alert("woohoo 1"); });
    }
</script>

My controller code looks like the following:

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult Ship()
{            
  return View();
}

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult Ship(string serialNumber)
{
  // Ensure that a serial number was entered
  JsonResult result = null;
  if (String.IsNullOrEmpty(serialNumber))
  {
    result = Json(new { success = false, message = "Please enter a serial number" });
    return result;
  }


  // Obtain the list of options from the database. Hardcoded for testing            
  result = Json(new { success = true, message = "Option 1 | Option 2 | Option 3" });
  return result;
}

Right now, when I run the page, FireFox prompts me to save the Json result when I submit a serial number. Am I way off here? It seems like I should be able to just flip the view via JavaScript. However, the posting is making it tricky. I need a way to get some results from the database when a user enters a serial number.

Thank you

Answer 1

You need to call your json result using

$.getJSON(url, callback);

Where callback is a function that will display your object. This will sort it, you need to have a select in the view and have your callback function add options to it from your json object.

In your case you will need to have a route defined in global asax or wherever you are creating routes, that accepts Product/Ship/SerialNumber and routes this to your Json result. This naming is a little confusing, you would be well advised to choose another name for the json result. Also the button should not submit the form, if you are using jQuery to add the values to an element that is already on the screen (maybe hidden).

Have a JSON result that outputs something like this

return Json(new{ OptionText = "Option 1", OptionValue = "1" });

You'll be able to see your output using something like this, jquery documentation will show you how to add the options into your select.

$.getJSON(url, null, function(json) { //null could be some input data
            alert(
            "This just shows the option value, "
            + json.OptionValue +
            "\nand the option text, "
            + json.OptionText
            );
        });

Answer 2

I made a few changes to your code. You should put quotes around the true and false values when returning the JSON object in your controller just to be safe. Also, you can just handle the submit event yourself and not worry about doing it in the validate event of the form. The return false tells the form to not actually submit it via a normal page refresh and by the ajax call instead. You were also missing a period between $ and post in the ajax call.

All that being said, hopefully this fixes the problems.

View Code

 <h2>Product Shipping</h2>
  <p><form id="myForm" action="/Products/Ship" method="post">
    <fieldset>               
      Product
      <%= Html.TextBox("product", null, new{@class = "required product"}) %> 

      <br />

      <input type="submit" value="OK" />        
    </fieldset>        
  </form></p>

<script type="text/javascript">
    $(document).ready(function () {
        $("#myForm").validate();
        $("#myForm input[type=submit]").submit(function() {
                    var serializedValues = $("#myForm").serialize();
      $.post("/Products/Ship", serializedValues, function(result) { 
       alert(result.success); 
      });
      return false;
     });
    });
</script>

Controller

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult Ship()
{            
  return View();
}

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult Ship(FormCollection fColl)
{
  // Ensure that a serial number was entered
  JsonResult result = null;
  if (String.IsNullOrEmpty(fcoll["product"]))
  {
    result = Json(new { success = "false", message = "Please enter a serial number" });
    return result;
  }


  // Obtain the list of options from the database. Hardcoded for testing            
  result = Json(new { success = "true", message = "Option 1 | Option 2 | Option 3" });
  return result;
}