javascript - 如何刷新视图的这一部分并且只显示所需的单选按钮

Question

再会。我有一个提供视图表单index.cshtml的ViewModel，因为这个ViewModel包含表单中将显示为可选选项的模型列表，SelectOptions，radios，DropDownList，现在......我需要根据 SelectOptions 加载这些收音机，我已经进行了相关查询，BackEnd 返回了可能是单选按钮选项的对象列表，但问题是：如何刷新视图的这一部分并且只显示所需的单选按钮？

1. 视图代码：

   1.1：多选代码：

           <div id="example" role="application">
               <div class="demo-section k-content">
                   @(Html.Kendo().MultiSelectFor(avm => avm.alarmModel.MeasureSpots).Name("measureSpotsMultiSelect")
                       .Placeholder("Seleccione Punto de Medida")
                       .AutoClose(false)
                       .DataTextField("Name")
                       .BindTo(Model.measureSpotsList)
                       .Value(new MultiSelectList(Model.measureSpotsList, "Id", "Name"))
                   )
               </div>
           </div>
   

   1.2：动态单选按钮的代码

           <div id="radiosMeasureTypes" class="flexbox-row">
               @foreach (var mtl in Model.measureTypesList)
               {
                   @(Html.Kendo().RadioButtonFor(avm => avm.alarmModel.Rules[0].MeasureType.Id).Name("MeasureType")
                       .Label(mtl.Name).Value(mtl.Id)
                       .HtmlAttributes(new
                       {
                           data_measuretype = "Measure Type",
                           data_measuretype_msg = "Seleccione un valor."
                       })
                   )
               }
           </div>
   

2. 向控制器执行 POST 请求的 JS 代码

           $.ajax({
               url: '/Alarms/GetMeasureTypesListByMeasureSpots',
               type: 'POST',
               data: JSON.stringify(MeasureSpots),
               dataType: 'json',
               contentType: 'application/json; charset=utf-8',
               error: function (xhr) {
                   $("#radiosMeasureTypes").load(location.href + " #radiosMeasureTypes");
               },
               success: function (xhr) {
                   $("#radiosMeasureTypes").load(location.href + " #radiosMeasureTypes");
               },
               async: true,
               processData: false
           });
   

3. Controller 在收到 JS 请求后，将其重定向到 BackEnd，并在获得响应后，将结果映射到模型列表。

   public List<MeasureTypeModel> GetMeasureTypesListByMeasureSpots(List<MeasureSpotModel> measureSpots)
   {
       RestClient client = new RestClient(ConfigurationManager.AppSettings["BackUrl"]);
       RestRequest request = new RestRequest(Method.POST);
       request.Resource = $"api/MeasureTypes/GetMeasureTypesByMeasureSpotsId";
       request.AddJsonBody(measureSpots);
       IRestResponse response = client.Execute(request);
       System.Diagnostics.Trace.WriteLine($"GetMeasureTypesListByMeasureSpots - Response Status:{response.StatusDescription}");
       bool IsResponseOk = CrosscuttingMethods.ValidateResponseStatus(response.StatusCode);
       if (IsResponseOk && response.Content.Length > 0)
       {
           string content = response.Content;
           JArray measureTypesArray = JArray.Parse(content);
           List<MeasureTypeModel> measureTypes = new List<MeasureTypeModel>();
           foreach (var item in measureTypesArray)
           {
               MeasureTypeModel measureType = new MeasureTypeModel
               {
                   Id = (int)item["Id"],
                   Name = (string)item["Name"],
                   Description = (string)item["Description"]
               };
               measureTypes.Add(measureType);
           }
           return measureTypes;
       }
       else
       {
           return null;
       }
   }
   

标签： javascriptjqueryasp.net-mvc