0

次のコードを適応させようとしています

$(“#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>
}

ビュー内で使用している理由は、検索ボタンをクリックした後にフォームが検証されていることに気付いたため、同じフォーム内で 2 つの送信ボタンを避けるためです。

役に立たない質問をする前に、提案された同様の質問も見ました。

上記の作業を行うことができませんでした。提供された助けに感謝します。

私は MVC3 と JQuery の初心者です

4

2 に答える 2

0

フォームを使用する方法 (検索しているフィールド値を取得してコントローラー アクションに送信する) では、ボタンを作成することで送信を回避できます。

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

また

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

これは、ポストバックを回避する最も簡単な方法です。

ajaxSubmit (jQuery プラグイン) を見ることも、Html.BeginForm の代わりに Ajax.BeginForm を使用することもできます (ただし、どちらももう少し時間がかかります)。

于 2012-07-12T11:18:04.990 に答える
0

jquery ID セレクター (“#id”) - 指定された id 属性を持つ単一の要素を選択します。

jquery ID セレクターを使用していますが、from 要素に 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 関数を編集します: data: {idNo:idno}

$.ajax({
         url: "/Owner/Search",
         type: "POST",
         data: {idNo:idno},
         datatype: "json",
         .........
     });
 });
于 2012-07-12T11:35:47.927 に答える