0

私は KENDO コントロールを持つフォームの詳細を収集している MVC アプリケーションを持っています。また、AJAX を使用していくつかのドロップダウン コントロールを更新することもできます。

私が現在直面している問題は、ドロップダウンで値が変更されたフォームを送信すると、他のコントロールがモデルを更新せず、フォームが更新された値を表示してもモデルが古い値を保持することです。 .

私はあらゆる種類のソリューションを試し、十分にグーグルで検索しましたが、成功しませんでした。私が今何をしているのかを示すためにコードを下に置いています。そこにいる人なら誰でもそれを見て、私が間違っていることを教えてくれます。

見る

@(Html.Kendo().DropDownList()
 .Name("ddlDateRange")
 .DataTextField("Name")
  .DataValueField("Id")
  .BindTo(Model.ReportIntervals)
  .Events(e => 
   {
      e.Change((@<text>
       function()
       {
          var selectedDateRange = $("#ddlDateRange").data("kendoDropDownList").value();
           $.ajax({
                   url: '@Url.Action("ChangeStartEndDates")',
                   type: 'POST',                                                                    
                   data: JSON.stringify({ selectedDateRange: selectedDateRange }),
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   async: true,
                   success: function (data) {   

                    $("#StartDate").data("kendoDatePicker").value(data.StartGamingDate);
                    $("#EndDate").data("kendoDatePicker").value(data.EndGamingDate);                                                                 
                                                        },
                   error: function () { alert('Error in DateRange dropdownlist'); }
                                                    });
                    }
                                            </text>));
                     })

)

@(Html.Kendo().DatePickerFor(model => model.StartGamingDate)
.Name("StartDate")
.Events(e =>
{
   e.Change((@<text>
   function()
   {
      var startDate = $("#StartDate").val();
      var endDate = $("#EndDate").val();
     $.ajax({
     url: '@Url.Action("ChangeDateRangeName")',
     type: 'POST',                                                                    
     data: JSON.stringify({ startDate: startDate, endDate: endDate }),
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     async: true,
     success: function (data) {
          $("#ddlDateRange").data("kendoDropDownList").text(data.ReportInterval.Name);
      },
      error: function () { alert('Error in StartDate DatePicker'); }
      });
     }
     </text>));
     }))

   @(Html.Kendo().DatePickerFor(model => model.EndGamingDate)
   .Name("EndDate")
   .Events(e =>
   {
     e.Change((@<text>
     function()
     {
       var startDate = $("#StartDate").val();
       var endDate = $("#EndDate").val();
       $.ajax({
          url: '@Url.Action("ChangeDateRangeName")',
          type: 'POST',                                                                    
          data: JSON.stringify({ startDate: startDate, endDate: endDate }),
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          async: true,
          success: function (data) {
            $("#ddlDateRange").data("kendoDropDownList").text(data.ReportInterval.Name);
          },
          error: function () { alert('Error in EndDate DatePicker'); }
          });
          }
          </text>));
      }))

コントローラ

**MODEL VALUES FORTHIS ACTION**

systemAuditReportViewModel.StartGamingDate = "01/01/2013";
systemAuditReportViewModel.EndGamingDate = "31/12/2013";
systemAuditReportViewModel.ReportInterval.Id = 30;
systemAuditReportViewModel.ReportInterval.Name = "Last Calender Year";

[HttpPost]        
    public JsonResult ChangeStartEndDates(int selectedDateRange)        
    {
        SystemAuditReport systemAuditReportViewModel = new SystemAuditReport();

        Nullable<DateTime> startGamingDate;
        Nullable<DateTime> endGamingDate;

        IG.General.Web.Model.ReportInterval reportInterval = new IG.General.Web.Model.ReportInterval();
        reportInterval.Id = selectedDateRange;

        IG.General.Web.Model.ReportIntervalFactory.GetDateRange(reportInterval, out startGamingDate, out endGamingDate);

        systemAuditReportViewModel.StartGamingDate = startGamingDate;
        systemAuditReportViewModel.EndGamingDate = endGamingDate;

        return Json(systemAuditReportViewModel, JsonRequestBehavior.AllowGet);
    }


**MODEL VALUES FOR THIS ACTION**

systemAuditReportViewModel.StartGamingDate = "27/03/2014";
systemAuditReportViewModel.EndGamingDate = "27/03/2014";
systemAuditReportViewModel.ReportInterval.Id = 2;
systemAuditReportViewModel.ReportInterval.Name = "Today";

[HttpPost]
    public ActionResult GenerateReport(SystemAuditReport systemAuditReportViewModel)
    {
        var errors = ModelState.Values.SelectMany(v => v.Errors);

        ReportContainer reportContainer = new ReportContainer();

        if (ModelState.IsValid)
        {               
            systemAuditReportViewModel.ReportPath = "/reports/";
            //systemAuditReportViewModel.StartGamingDate = startDate;
            //systemAuditReportViewModel.EndGamingDate = endDate;

            this.CreateReport(systemAuditReportViewModel, out reportContainer);
        }

        return View(reportContainer);
    }
4

1 に答える 1

0

私たちもこれに少し苦労しました。テンプレートを使用すると、バインドが少し難しくなります。モデルのバインドされたインデックスと同じ名前を DropDownList に付ける必要があります。 

@model string

@(Html.Kendo().DropDownListFor(m => m)
  .BindTo("#=Model.EntityClassId")
  .DataTextField("Value")
  .DataValueField("Id")
  .Name("EntityClassId")
  .OptionLabel(MyApp.Resources.Text.DamageTypeOptionLabel)
  .AutoBind(true)
  .DataSource( source => source
     .Read( read=>read.Action("SomeMethod", "SomeController"))
     .ServerFiltering(true)
   )
   .Events(events => events
     .Select("onDamageTypeSelected")
     .Change("onDamageTypeChanged")
     .DataBound("onDamageTypeDatabound")
   )
   .HtmlAttributes(new{style="height:21px;vertical-align:center"})
)
于 2014-04-24T17:08:28.980 に答える