javascript - ASP.NET MVC4: テキストが変更されたら、ajax 要求を実行し、json の結果を返し、ページをリロードせずにモデルを更新します

Question

これが少し長い場合は申し訳ありませんが、これは私の最初の投稿であり、情報の少ない投稿に先送りされる可能性があることを知っているので、ここに行きます.

私は現在、厳密に型指定された ViewModel を持つビューで ASP.NET MVC 4 でコーディングしています。ViewModel は単純で、プリミティブデータ型で構成されています。このモデルは、データベース内のデータを挿入または更新するために使用されることはなく、1 ページのみに使用されます。送信ボタンがクリックされると、コントローラーを使用してデータベースに対してさまざまなクエリを実行し、特定のフィールドが有効かどうか (データアノテーションで処理できない条件) を確認し、無効なフィールドがなければ送信します。私のプロセスの次のステップへのデータ。

私の状況はこれです。ページを更新せずに、次のことを行う必要があります。

ContactID が変更されたかどうかを確認する
ContactID が変更され、入力されている場合は、データベースの Contact テーブルをチェックして、ContactID が存在するかどうかを確認します。
ContactID がデータベースに存在する場合は、モデルのそれぞれのテキストボックスに連絡先の情報を表示し、これらのテキストボックスを無効にします。
ContactID が存在しない場合は、ContactID の検証メッセージにモデルエラーまたは何らかの通知 (アラートを表示したくないが、好き嫌いはない) を表示し、モデルの各テキストボックスを null に設定します。

基準は主にユーザー向けです。ユーザーは、送信される連絡先を確認する必要があります。ユーザーが ContactID を入力しないことを選択した場合でも、ユーザーは連絡先情報を入力できる必要があるため、リストビューを実行できません。そうは言っても、念のため、ユーザーが送信をクリックしたときに検証します。

意見

@model ViewModels.OrderViewModel

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()               
@Html.ValidationSummary(true)

<table>
  <tr>
       <td>
           @Html.TextBoxFor(model => model.OtherDetails, new { id="OtherDetails" })
       </td>
  </tr>
  <tr>
       <td>
            @Html.TextBoxFor(model => model.ContactID, new { id="ContactID" })
            @Html.ValidationMessageFor(model => model.ShipTo)
       </td>
  </tr>
  <tr>
       <td>
            @Html.TextBoxFor(model => model.ContactStreet, new { id = "ContactStreet" })
       </td>
       <td>
            @Html.TextBoxFor(model => model.ContactCity, new { id = "ContactCity" })
       </td>
       <td>
            @Html.TextBoxFor(model => model.ContactState, new { id = "ContactState" })
       </td>
  </tr>

</table>
<input type="submit" value="Submit" />
}

@section scriptContent
{
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    @*<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>*@
    <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("form :input:enabled:visible:first").focus();
            $("form :input:enabled:visible:first").select();
            $(".input-validation-error").first().focus();
            $(".input-validation-error").first().select();
        });

        //THIS IS MY CURRENT CODE 
        $('#ContactID').change(function () {
            var ContactIDValue = $('#ContactID').val();

            $.ajax({
                url: '/Order/GetContactInformationForContactID/',
                type: 'POST',
                data: { ContactIDValue: ContactIDValue },
                success: function (result) { alert(result.STREET); }
                   //My database column is called STREET
            });
        });
    </script>
}

モデル

public class OrderViewModel
{
    public string OtherDetails { get; set; }
    public string ContactID { get; set; }
    public string ContactStreet { get; set; }
    public string ContactCity { get; set; }
    public string ContactState { get; set; }

}

コントローラ

[HttpGet]
public ActionResult Index()
{
    //private :)
}

[HttpPost]
public ActionResult Index(OrderViewModel)
{
    //private :)
}

[HttpPost]
public ActionResult GetContactInformationForContactID(string ContactIDValue )
{
    var result = myDB.CONTACTs.Where(r => r.CONTACTID == ContactIDValue ).FirstOrDefault();

    return Json(result );
}

私のコードがどのように機能するかは、ユーザーが ContactID を入力すると、ページがアラートを返すことです。一致があった場合、アラートはデータベースからの STREET 値を表示します。一致しなかった場合は、空白のアラートボックスが表示されます。

各テキストボックスにIDを付けてから、javascriptを使用してそれらを呼び出し、Jsonで更新しようとしましたが、成功していません。私がそれをどのように試したかを以下に示します。おそらく私はそれを間違っていますか？

$('#ContactStreet').Val = result.STREET;

私はいくつかの部分的なビューをいじってみましたが、私はそれらに習熟しておらず、モデルの完全性が保持されるかどうか確信が持てないことを認めなければなりません. 可能であれば全体で同じモデルを使用したいのですが、他のソリューションも受け入れます。最終的に 2 つの別個のモデルが必要になった場合、ユーザーが送信ボタンをクリックしたときに両方が必要になる可能性があります。

いくつかの応答を楽しみにしています。これは、過去 1 週間にわたって私の時間を費やしてきた問題です。

javascript - ASP.NET MVC4: テキストが変更されたら、ajax 要求を実行し、json の結果を返し、ページをリロードせずにモデルを更新します

1 に答える 1

Related

Reference