ASP.NET MVC 2 使用 jQuery 加载部分视图 - 无客户端验证

Question

我正在使用 jQuery.load() 来渲染部分视图。这部分看起来像这样：

$('#sizeAddHolder').load(
                '/MyController/MyAction', function () { ... });

我的控制器中的操作代码如下：

    public ActionResult MyAction(byte id)
    {
        var model = new MyModel
        {
            ObjectProp1 = "Some text"
        };

        return View(model);
    }

    [HttpPost]
    public ActionResult MyAction(byte id, FormCollection form)
    {
        // TODO: DB insert logic goes here

        var result = ...;

        return Json(result);
    }

我返回一个看起来像这样的部分视图：

<% using (Html.BeginForm("MyAction", "MyController")) {%>
    <%= Html.ValidationSummary(true) %>

    <h3>Create my object</h3>

    <fieldset>
        <legend>Fields</legend>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.ObjectProp1) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.Size.ObjectProp1) %>
            <%= Html.ValidationMessageFor(model => model.ObjectProp1) %>
        </div>

        div class="editor-label">
            <%= Html.LabelFor(model => model.ObjectProp2) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.ObjectProp2) %>
            <%= Html.ValidationMessageFor(model => model.ObjectProp2) %>
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

<% } %>

客户端验证在这种情况下不起作用。此外，包含验证消息的脚本也不包含在返回的视图中。我的模型类中的两个属性都有 Required 和 StringLength 属性。 有什么方法可以在这样加载的视图中触发客户端验证吗？

Answer 1

首先，您应该返回部分视图而不是视图。

return PartialView(model);

其次，您是否尝试使用 AJAX 加载此部分视图？在这种情况下，您可能需要使用 jquery.ajax

function ajax_update(path)
  $.ajax {
    url: path,
    success: function(result) {
      $('#sizeAddHolder').html(result);
    }
  return false;
}

Answer 2

您应该在 ajax 调用中使用 dataType

function ajax_update(path)
  $.ajax {
    url: path,
    dataType: "html",
    success: function(result) {
      $('#sizeAddHolder').html(result);
    }
  return false;
}

来自 jQuery 文档：

dataType
默认值：智能猜测（xml、json、脚本或 html）

您期望从服务器返回的数据类型。如果未指定，jQuery 将根据响应的 MIME 类型智能地尝试获取结果（XML MIME 类型将生成 XML，在 1.4 JSON 中将生成 JavaScript 对象，在 1.4 脚本中将执行脚本，以及任何其他内容）否则将以字符串形式返回）。可用的类型（以及作为成功回调的第一个参数传递的结果）是：

* "xml": Returns a XML document that can be processed via jQuery.
* "html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
* "script": Evaluates the response as JavaScript and returns it as plain text. Disables caching unless option "cache" is used. Note: This will turn POSTs into GETs for remote-domain requests.
* "json": Evaluates the response as JSON and returns a JavaScript object. In jQuery 1.4 the JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. (See json.org for more information on proper JSON formatting.)
* "jsonp": Loads in a JSON block using JSONP. Will add an extra "?callback=?" to the end of your URL to specify the callback.
* "text": A plain text string.

Answer 3

这是适用的： asp-net-mvc-client-side-validation-with-dynamic-contents

Answer 4

问题是使用 ajax 加载的表单永远不会注册到 Microsoft 验证。要解决此问题，请调用以下函数 Sys.Mvc.FormContext._Application_Load。

function ajax_update(path)
  $.ajax {
    url: path,
    success: function(result) {
      $('#sizeAddHolder').html(result);
      Sys.Mvc.FormContext._Application_Load();
    }
  return false;
}

那应该解决它。另外，请确保通过 ajax 加载的表单具有唯一的 ID。否则，验证将失败。

避免使用 load()。它会删除响应中加载的所有脚本。

Answer 5

我不确定您是否仍在寻找问题的答案，但我已经写了一篇关于使 AJAX 加载的表单与 ASP.NET MVC 2 中的客户端验证一起使用的文章：
http://tpeczek.com/2010/04/制作-aspnet-mvc-2-client-side.html

Answer 6

在 html 文件中，您可以包含以下内容：

对此表示抱歉，但我不知道如何发布链接 html。因此，您可以有一个链接 class="delete"、id= value 和 href = "javascript: ;”

然后我使用这个函数来渲染部分视图：

 $(".delete").click(function(event){
          var id = $(".select").attr("id");
          var id2 = event.target.id;
          $.ajax({
                url: "Persona/Delete?idPersona=" + id2.toString(),
                success: function (data) {
                    $("#popUpConfirmar").html(data);
                }
            });

            dialogoPopUp.dialog("open");
        });

记住在控制器中你必须有一个类似的操作：

    public PartialViewResult Delete(int idPersona)
    {
        PersonaDataAccess personaDataAccess = new PersonaDataAccess();
        Persona persona = personaDataAccess.GetOne(idPersona);
        return PartialView("Delete",persona);
    }