MVC3 jQuery的AJAX搜索

我试图适应下面的代码MVC3 jQuery的AJAX搜索

$(“#artistSearch”).submit(function (event) { 
    event.preventDefault(); 
    var form = $(this); 
    $.ajax({ 
     url: form.attr(“action”), 
     data: form.serialize(), 
     beforeSend: function() { 
     $(“#ajax-loader”).show(); 
    }, 
    complete: function() { 
     $(“#ajax-loader”).hide(); 
    }, 
    error: searchFailed, 
    success: function (data) { 
     $(“#artistTemplate”).tmpl(data).appendTo(“#artist-list”); 
    } 
});

从Professional ASP.NET MVC 3允许搜索和同一表单中返回数据，并结束了以下内容：

在一个单独的脚本文件

$(function() { 

    $("#btnSearch").click(function (event) { 
    event.preventDefault(); 
    var idno = $("#txtIdNo").value; 

    $.ajax({ 
     url: "/Owner/Search", 
     type: "POST", 
     data: idno, 
     datatype: "json", 
     beforeSend: function() { 
      $("#FullName").html(""); 
      $("#OwnerId").html(""); 
      $("#notFound").html(""); 
      $("#ajax-loader").show(); 
     }, 
     complete: function() { 
      $("#ajax-loader").hide(); 
     }, 
     error: function() { 
      $("#notFound").html("Sorry, no data returned."); ; 
     }, 
     success: function (data) { 
      $("#OwnerId").html(data.OwnerId); 
      $("#FullName").html(data.FullName); 
     } 
    }); 
}); 

});

在控制器

[HttpPost] 
    public JsonResult SearchById(string idNo) 
    { 
     var owner = _ownerService.FindBy(x => x.IdNo == idNo); 
     return Json(owner); 
    }

在视图

@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <div> 
      <p> 
       Id No: 
       <input type="text" name="txtIdNo" /> 
       <input type="button" value="Search" name="btnSearch" /> 
       <label id="notFound"></label> 
      </p> 
     @Html.Hidden("OwnerId") 
     . 
     . 
     . 

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

的原因，我使用内的观点是避免出现两个相同的形式内提交按钮，因为我意识到了形式点击搜索按钮后验证。

我在查询之前也查看了建议的类似问题，但无济于事。

我一直无法做出上述工作，并希望提供任何帮助。

我是一个新手，MVC3和JQuery

来源

2012-07-12 kagundajm

你什么错误？ – Marc 2012-07-12 11:17:45

如果“我在视图中使用的原因是为了避免在同一个表单中提交两个按钮，因为我在点击搜索按钮后意识到表单正在验证。”是原因...看看http://stackoverflow.com/a/9022708/1182982 – Yasser 2012-07-12 11:24:39

@亚瑟我已经书签引用的文章，并会通过它。 – kagundajm 2012-07-12 13:37:44

jQuery的ID选择器（“#ID”） - 选择具有给定id属性的单个元素。

您正在使用jQuery ID选择器，但您不具有来自元素的id属性。

将id属性添加到您的表单元素。

<input type="text" name="txtIdNo" /> 
<input type="button" value="Search" name="btnSearch" /> 

to 

<input type="text" id="txtIdNo" name="txtIdNo" /> 
<input type="button" id="btnSearch" value="Search" name="btnSearch" />

编辑jQuery的AJAX功能：数据：{NO：IDNO}

$.ajax({ 
     url: "/Owner/Search", 
     type: "POST", 
     data: {idNo:idno}, 
     datatype: "json", 
     ......... 
    }); 
});

来源

2012-07-12 11:35:47

我已经添加了ID选择器，至少现在正在调用控制器。我唯一的问题是传递给控制器的空值。 – kagundajm 2012-07-12 13:34:57

查看已更新的答案。 – 2012-07-12 13:45:30

我已经将数据从数据更新到数据：{idNo：idno}，但仍然传递空值。我也试着改变var idno = $（“＃txtIdNo”）。 var idno = $（“＃txtIdNo”）。val（）;没有成功。 – kagundajm 2012-07-12 14:24:20

您使用的形式的方式（去抓住你要搜索的字段值，并将其发送到控制器动作）你可以通过避免提交按钮;

<button type="button">Create</button>

或

<input type="button" value="Create" />

这将是避免回发的最快方式。

你也可以看看ajaxSubmit会（jQuery插件），也可以使用Ajax.BeginForm代替Html.BeginForm（但这些都需要多一点时间）

来源

2012-07-12 11:18:04 Hammerstein

MVC3 jQuery的AJAX搜索

回答

相关问题