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

现在，当我运行页面时，当我提交序列号时，FireFox会提示我保存Json结果。我离开这里了吗？看起来我应该能够通过JavaScript翻转视图。然而，这个帖子让它变得棘手。当用户输入序列号时，我需要一种从数据库中获取一些结果的方法。

谢谢

Answer 1

我对您的代码进行了一些更改。为了安全起见，在控制器中返回JSON对象时，应该在true和false值周围加上引号。此外，您可以自己处理提交事件，而不必担心在表单的validate事件中执行此操作。返回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

您需要使用

调用您的json结果

$.getJSON(url, callback);

回调是一个显示对象的函数。这将对它进行排序，你需要在视图中有一个select并让你的回调函数从你的json对象中为它添加选项。

在您的情况下，您需要在全局asax中或在创建路径的任何位置定义路由，接受Product / Ship / 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
            );
        });

ASP.NET MVC - 主/详细发布

2 个答案: