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

数据类型 默认值：智能猜测（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/making-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);
    }