1

私はMVC3でアプリケーションを開発しています。ドロップダウンをクリックすると、部分的なビューを表示する必要があります。そのために、ajaxを作成しました。

 $("#UserName").change(function () {
        var userid = $("#UserName").val();
        var ProvincialStateID = $("#State").val();
        var Hobbyid = $("#Hobby").val();
        var Districtid = $("#DistrictNames").val();
        var Homeid = $("#Hobbyhome_EstablishmentId").val();
        var urlperson = '@Url.Action("FetchPersonByUserName")';
        $.ajax({
            type: "POST",
            url: urlperson,
            data: { userid: userid, stateid: ProvincialStateID, hobbyid: Hobbyid, districtid: Districtid, homeid: Homeid },
            success: function (data) {
            }
        });
    });

そして私はコントローラーに次のように関数を書きました：

 [HttpPost]
    public ActionResult FetchPersonByUserName(int userid,int stateid,int districtid,int homeid,int Hobbyid)
    {
        //Code to fetch data using all the parameters
        return PartialView("_LearnerAssociationGridPartial", list);
    }

ここから部分的に表示され、データも表示
されますが、フロントエンドに表示されている間はデータを表示できません。
助けてください多分私のajaxが間違っているかもしれません私がどこで間違っているのか教えてください。

これが私のメインビューです：

@model HobbyHomesWebApp.ViewModel.LearnerAssociationViewModel
@{
    Layout = "~/Views/Shared/_LayoutPostLogin.cshtml";
}

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post))
{
     @Html.ValidationSummary(true)
     <table>
         <div>
             @{Html.RenderPartial("_LearnerAssociationWebPartial", Model.learner);}
         </div> 
     </table>
     <table>
         <div id="result">
             @{Html.RenderPartial("_LearnerAssociationGridPartial", Model.LearnerList);}
         </div>
     </table>
}

ajax関数は最初のビューに記述され、ドロップダウンは最初のビューにあります。
次に、最初のビューでドロップダウンをクリックすると、2番目のビューにあるグリッドにデータが表示されます。

私の最初のビューは次のとおりです。

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post))
{
  <table>
    <tr>
        <td>
            @Html.Label(@Resources.selectusername)
        </td>
        <td>:</td>
        <td>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.Loginaccount.LoginAccountID, new SelectList(ViewBag.UserName, "LoginAccount.LoginAccountID", "FirstName"), "--Select UserName--", new { @id = "UserName" })
        </div>
        </td>
    </tr>
            </table>

}

4

2 に答える 2

3

編集：わかりました。正しく理解できれば、ビューは次のようになります。

@model HobbyHomesWebApp.ViewModel.LearnerAssociationViewModel
@{
    Layout = "~/Views/Shared/_LayoutPostLogin.cshtml";
}

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post))
{
     @Html.ValidationSummary(true)
     <table>
         <tr>
         <td>
            <div>
                 @{Html.RenderPartial("_LearnerAssociationWebPartial", Model.learner);}
            </div> 
         </td>
         </tr>
     </table>
     <table>
         <tr>
         <td> 
             <div id="result">

            </div>
         </td>
         </tr>
     </table>
}

これは、最初にページをロードしたときに、2 番目の に何も表示されないことを意味しますdiv。

div次に、選択した値に基づいて部分ビューを にロードします。まず、JavaScript を追加して、既に説明したアクションを呼び出します。

$('#NameOfYourDropDownList').change(function () {
    var userid = $('#NameOfYourDropDownList').val();
    var ProvincialStateID = $("#State").val();
    var Hobbyid = $('#Hobby').val();
    var Districtid = $('#DistrictNames').val();
    var Homeid = $('#Hobbyhome_EstablishmentId').val();
    var urlperson = "@Url.Action('FetchPersonByUserName')";
    $.ajax({
        type: 'POST',
        url: urlperson,
        data: { userid: userid, stateid: ProvincialStateID, hobbyid: Hobbyid, districtid: Districtid, homeid: Homeid },
        success: function (data) {
            $('#result').html(data);
        }
    });
});

はActionResultHTML を返します。あなたの成功関数では、これを の HTML に割り当てていますdiv。

于 2012-05-03T12:12:35.693 に答える
1

私はあなたが何を望んでいたかを理解したと思います (理解していない場合は私を撃たないでください)

あなたがタグを持っていると仮定しましょう

<div id="Returned-Content-Container">
</div>

2案ご提案します（お好きなものをお選びください）

Razor エンジン、MVC スタイル:

コードを使用してフォームを作成する場合:

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post))

FormMethod.Post を次のように置き換えます

@using (Html.BeginForm("LearnerAssociation", "Registration", 
        new AjaxOptions() 
                            {
                                HttpMethod = "POST",
                                UpdateTargetId = "Returned-Content-Container",
                                InsertionMode = InsertionMode.Replace
                            })
        {
              // Your form fields go here
        }

これが行うことは、データが返されたときに、定義されたタグを ajax 呼び出しから返されたデータに置き換えることです。自動的。

この方法は、かみそりエンジンでそれを行うことです。

jquery の方法で実行する場合は、次のようにします。

$("#UserName").change(function () {
    var userid = $("#UserName").val();
    var ProvincialStateID = $("#State").val();
    var Hobbyid = $("#Hobby").val();
    var Districtid = $("#DistrictNames").val();
    var Homeid = $("#Hobbyhome_EstablishmentId").val();
    var urlperson = '@Url.Action("FetchPersonByUserName")';
    $.ajax({
        type: "POST",
        url: urlperson,
        data: { userid: userid, stateid: ProvincialStateID, hobbyid: Hobbyid, districtid: Districtid, homeid: Homeid },
        success: function (data) {
             // This places all data returned into the defined DOM element
             $('#Returned-Content-Container').html(data);
        }
    });
});

お役に立てれば、

幸運を ！

于 2012-05-03T13:10:31.910 に答える