ASP.NET MVC - 主/从发布

Question

我新的ASP.NET MVC。我试图创建我认为是基本功能的东西。我有一个通过“http://myserver.com/Products/Ship/”访问的视图。当用户访问此页面时，系统会提示他们输入产品的序列号。用户输入序列号并点击“下一步”后，我想向他们展示运输选项的下拉列表。我想这样做，同时保持它们在“http://www.myserver.com/Products/Ship”网址。正因为如此，我认为JQuery将是一个合适的答案。在这个过程中，我遇到了一个问题。我无法根据需要进入第二页。

仅供参考，我的观点的代码如下所示：

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

我的控制器代码如下所示：

[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; 
} 

现在，当我运行该页面，火狐提示我保存我提交序列号时Json的结果。我在这里？似乎我应该可以通过JavaScript翻转视图。然而，这个帖子使得它很棘手。当用户输入序列号时，我需要一种方法来从数据库中获得一些结果。

谢谢

Answer 1

我对代码做了一些更改。在控制器中返回JSON对象时，应该将真实值和假值放在引号中以保证安全。另外，您可以自己处理提交事件，而不用担心在表单的验证事件中执行该操作。 return false告诉表单实际上不是通过正常的页面刷新和ajax调用来提交它。在ajax调用中，您还缺少$和$ post之间的时间段。

之所以这么说，希望这次修复的问题。

查看代码

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

控制器

[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; 
} 

Answer 2

你需要调用使用

$.getJSON(url, callback); 

哪里回调，将显示你的目标函数的JSON结果。这将对它进行排序，你需要在视图中有一个选择，并让你的回调函数从你的json对象中添加选项。

在你的情况，你需要有全球ASAX或任何你正在创建路由定义的路由，接受产品/船/的SerialNumber和路线给你的JSON结果。这个命名有点混乱，建议您为json结果选择另一个名称。另外，按钮不应提交表单，如果你正在使用jQuery的值添加到已经是屏幕（可能隐藏）上的元素。

有一个JSON的结果输出是这样的

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

您可以看到使用这样的事情你的输出，jQuery的文档 会告诉你如何将选项添加到您的选择。

$.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 
      ); 
     });