نمایش partialView با انتخاب Radiobutton در MVC

4/28/2016 MVC
4123

در مطلب  استفاده از RadioButton  در MVC طریقه خواندن اطلاعات از بانک اطلاعاتی و نمایش در RadioButtonList  را یاد گرفتم ، اما حال میخواهم هر زمان یکی از RadioButton  ها را انتخاب میکنم PartoialView  دلخواه نمایش داده شود.

 

با استفاده از سایتی که در مقاله قبل معرفی کردم یک Helper  برای استفاده از radioButton ها ایجاد کردیم ، برای کمک دوباره آن را اینجا کپی میکنم 

@helper RadioButtonList(string groupName, IEnumerable<System.Web.Mvc.SelectListItem> items)
{
    <div class="RadioButtonList">
        @foreach (var item in items)
        {
            @item.Text
            <input type="radio" name="@groupName"
                   value="@item.Value"
                   @if (item.Selected) { <text> checked="checked" </text>  } />
            
        }
    </div>
}

منبع: http://www.dotnettips.info

کلاس Model  جهت بانک اطلاعاتی به این صورت است :

 public class HelpType
    {
        public int Id { get; set; }
        [Display(Name ="نوع کمک")]
        public string HelpTypeName { get; set; }
    }

در کنترل هم این کد را میتوان نوشت:

ViewBag.HelpType = new SelectList(db.HelpTypes, "Id", "HelpTypeName");

 

حال در View  که قصد نمایش لیست radioButton  ها را دارم این کد را مینویسم 

<fieldset class="span12">
    
    @*@Html.RadioButton(name: "S", value: "fs", isChecked: true) حمایت مالی
    @Html.RadioButton(name: "S", value: "ts", isChecked: false) حمایت تخصصی
    @Html.RadioButton(name: "S", value: "fts", isChecked: false) حمایت مالی و تخصصی
    @Html.RadioButton(name: "S", value: "Ms", isChecked: false) فقط حق عضویت*@
    @RadioButtonHelpers.RadioButtonList("SupportType",ViewBag.HelpType);
</fieldset>

قسمت بالا فقط جهت اطلاع و نمایش استاتیک Radiobutton  ها است . که به صورت توضیحات در امده و در خط اخر با استفاده از helper  اطلاعات را که از کنترل دریافت میکنیم نمایش میدهیم.

برای نمایش Partial نیز از این کد استفاده میکنیم 

@section scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script>
        $(function (){
            $("[name=SupportType]").on('change', function () {
                
                var value = $('input[name=SupportType]:checked').val();
                alert(typeof(value)+":"+ value);
                $.ajax({
                    url: '@Url.Action("GetHelpForm", "Register1")',
                    data:{ Id:value},
                    type: 'GET',
                    success: function (data) {
                        $('#loadpartial').html(data);
                    }

                })
            })
        })
    </script>
}

دو نکته لازم به یاد اوری است، اول: در بعضی از مثالها در اینترنت ازکد زیر استفاده شده بود که اطلاعات ارسالی به Controller خالی یا همان null بود 

data:  Id= value,

که باید تصحیح میشد و دوم 

alert(typeof(value)+":"+ value);

را فقط به جهت نمایش یک پیغام برای انتخاب radioButton  نوشتم که لازم است پس از مطمئن شدن از انتخاب درست radioButton  آن را حذف نمایید.

 و کد برای نمایش partialview

[HttpGet]
        public ActionResult GetHelpForm(string Id)
        {
            switch (Id)
            {
                case "1":
                    return PartialView("_FinancialSupport");
                case "2":
                    return PartialView("_TechnicalSupport");
                case "3":
                    return PartialView("_FinancialAndTechnicalSupport");
                case "4":
                    return PartialView("_MembershipFees");
                default:
                    break;
            }
           
          return PartialView("_MembershipFees");
        }