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

Posted 2023-05-09

【中文标题】ASP.NET MVC 2 使用 jQuery 加载部分视图 - 无客户端验证

【英文标题】：ASP.NET MVC 2 loading partial view using jQuery - no client side validation

【发布时间】：2011-02-08 19:16:36

【问题描述】：

我正在使用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 属性。 有没有办法在这样加载的视图中触发客户端验证？

【参考方案1】：

首先你应该返回一个局部视图而不是一个视图。

return PartialView(model);

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

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

【讨论】：

感谢您提供宝贵的信息。我已经纠正了这些错误，但这并没有真正产生影响。在这两种情况下，呈现的 html 完全相同，因为 load() 获取 html 的方式与 ajax() 使用 XMLHttpRequest 和 return View(model) 的方式相同，如果没有 SomeAction.aspx 将呈现 SomeAction.ascx。看看这里：***.com/questions/2043394/… 所以主要问题仍然存在：没有客户端验证；没有包含验证消息的脚本..

他也可以返回一个视图，只要他返回的视图没有使用与调用它的主页面相同的母版页，这并不重要

【参考方案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.

【讨论】：

感谢您提供此信息。问题是，在一种情况下，我想返回 html（当传递的数据无效时 - 因为客户端验证失败..），以便用户可以进行更改并再次发布。但是当数据验证并成功创建数据库中的新对象时，我想返回 Json。有没有办法检查返回结果的类型？

尝试设置响应的MIME类型：如果没有指定，jQuery会根据响应的MIME类型智能地尝试获取结果

我相信这是默认行为，在这种情况下，“如果没有指定”是指“如果您没有明确设置”而不是“将其设置为无”。

【参考方案3】：

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

【参考方案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()。它会删除响应中加载的所有脚本。

【参考方案5】：

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

【参考方案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);