Partial View not getting updated while return Updated Partial View. What am i missing?

Question

My Html

@using (Html.BeginForm("userrights", "Users", FormMethod.Post, new { @class = "form-horizontal", role = "form", @id = "userrights_frm", @name = "userrights_frm" }))
    {
        <div class="form-group">
            <div class="col-md-7" style="padding-right:10px">
                @Html.TextBoxFor(m => m.firstname, new { @class = "form-control", @id = "firstname", @name = "firstname", @placeholder = "Serach By User Name" })
                @Html.HiddenFor(m => m.id, new { @class = "form-control", @id = "id", @name = "id" })
            </div>
            <div class="col-sm-2">
                <button type="submit" id="btn_search" value="Search" name="btn_search" class="btn btn-default">Search</button>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="form-group">
            <div class="col-md-1" style="padding-top:7px"> Select Top Link </div>
            <div class="col-sm-6">
                @Html.DropDownList("selectedMenu", Model._menu.Select(menu => new SelectListItem { Text = menu.menuname, Value = menu.menuid.ToString() }), "Select Menu", new { @class = "form-control" })
            </div>
            <div class="clear"></div>
        </div>
        @Html.Partial("_userRightPartial", Model._UserRightPartialView)
        <div class="clear"></div>
    }

AjaxMethod on Select Menu Changed

$("#selectedMenu").change(function () {
                mnid = $(this).val();
                userId = $("#userid").val();
                $.ajax({
                    type: 'POST',
                    url: "/Users/getsubmenus",
                    data: "{userid:'" + userId + "',menuid:'" + mnid + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    success: function (data) {
                        if (data.result == "Error") {
                            alert(data.message);
                        }
                    }
                });

            });

Action Result called in Ajax "getsubmenus"

public ActionResult getsubmenus(string userid, string menuid)
        {            
            userright _userright = new userright();
            user _user = _ftwCommonMethods.GetuserDataById(Convert.ToInt32(userid));
            UserRightPartialView _UserRightPartialView = new UserRightPartialView();
            if (_user!=null)
            {
                IEnumerable<SubMenuListModel> _SubMenuListModel = _ftwCommonMethods.GetSubMenuItemsByMenu(_user.id.ToString(), menuid);

                _UserRightPartialView.firstname = _user.firstname;
                _UserRightPartialView.userid = _user.id;
                _UserRightPartialView._SubMenuListModel = _SubMenuListModel;
            }
            return PartialView("_userRightPartial", _UserRightPartialView);
        }

ActionResult When i click on Search Button

        [HttpPost]
        [AuthorizeUser]
        public ActionResult userrights(FormCollection form_collection)
        {
            IEnumerable<MenuListModel> _MenuListModel = _ftwCommonMethods.GetMenuItems();
            int userid = 0;
            if (!string.IsNullOrEmpty(form_collection["id"].ToString()) && form_collection["id"].ToString() != "0")
            {
                userid = Convert.ToInt32(form_collection["id"].ToString());
            }
            user _user = _ftwCommonMethods.GetuserDataById(userid);
            UserRightViewSearch _UserRightViewSearch = new UserRightViewSearch();
            _UserRightViewSearch._menu = _MenuListModel;
            if (_user != null)
            {
                IEnumerable<SubMenuListModel> _SubMenuListModel = _ftwCommonMethods.GetSubMenuItems(_user.id.ToString());
                UserRightPartialView _UserRightPartialView = new UserRightPartialView();
                _UserRightPartialView.firstname = _user.firstname;
                _UserRightPartialView.userid = _user.id;
                _UserRightViewSearch.id = _user.id;
                _UserRightPartialView._SubMenuListModel = _SubMenuListModel;
                _UserRightViewSearch._UserRightPartialView = _UserRightPartialView;
            }
            else
            {
                ViewData["message"] = "User Not Found.";
            }
            return View(_UserRightViewSearch);

        }

Partial View

@model FTW_Admin.Models.UserRightPartialView

@if (Model.firstname != null)
{
    <div class="dhe-example-section" id="ex-1-2">
        <div id="example-1-2">
            <div class="col-md-6" style="padding:0px 10px 10px 0px">
                <div class="drag_to">@Model.firstname
                    @Html.Hidden("userid", Model.userid, new { @id = "userid" })
                </div>
                <div class="middle_section">
                    <div class="inner_section_page_sec">
                        <div id="container" class="main_page_area">
                            <div class="column left first">
                                <div>
                                    <ul class="sortable-list-allow">

                                            @foreach (var row in Model._SubMenuListModel)
                                            {
                                                if (row.allowd)
                                                {
                                                    <li class="sortable-item loop_content">
                                                        <table id="dragable_grid">
                                                            <tr>
                                                                <th style="color:#000">
                                                                    @row.submenuname
                                                                    @Html.Hidden("submenuid", @row.submenuid, new { @id = "submenuid" })
                                                                    @Html.Hidden("menuid", @row.submenuid, new { @id = "menuid" })

                                                                </th>
                                                                <th class="heading_style_a" style="text-align:right"><span class="allowedSpan"> Allowed</span></th>
                                                            </tr>
                                                        </table>
                                                    </li>
                                                }
                                            }

                                    </ul>
                                    <div class="clear"></div>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6" style="padding:0px 10px 10px 0px">
                <div class="drag_to">Drag and Drop section to home screen section</div>
                <div class="inner_section_page_sec">
                    <div class="main_page_area">
                        <div id="container">
                            <div class="column left">
                                <ul class="sortable-list-disallow">

                                       @foreach (var row in Model._SubMenuListModel)
                                        {
                                            if (!row.allowd)
                                            {
                                                <li class="sortable-item loop_content">
                                                    <table id="dragable_grid">
                                                        <tr>
                                                            <th style="color:#000">
                                                                @row.submenuname
                                                                @Html.Hidden("submenuid", @row.submenuid, new { @id = "submenuid" })
                                                                @Html.Hidden("menuid", @row.submenuid, new { @id = "menuid" })
                                                            </th>
                                                            <th class="heading_style_a" style="text-align:right"><span class="allowedSpan">Denied</span></th>
                                                        </tr>
                                                    </table>
                                                </li>
                                            }
                                        }

                                </ul>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>


}

The thing is when i search records i get all sub menu items in partial view initially. Then i want to do is when i select particular menu link in dropdown partial view should be updated only with submenus of selected menu

Answer 1

Your ajax function specifies a return type of json but your calling a controller method that returns a view. Then in the success callback, you refer to the result property which does not exist. Instead you need to update the DOM with the partial view your returning. In addition, there is no need to stringify the data you pass to the controller. You script should be

$("#selectedMenu").change(function () {
  mnid = $(this).val();
  userId = $("#userid").val();
  $.ajax({
    type: 'POST',
    url: '@Url.Action("getsubmenus", "Users")', // don't hard code url's
    data: { userid: userId, menuid: mnid }, // no quotes
    dataType: 'html', // change this
    success: function (data) {
      $(someElement).html(data); // modify selector to suit
    }
  });
});

Side note: Your partial is rendering controls with duplicate id attributes (invalid html) and duplicate name attributes without indexers so will not be able to bind to a model when you submit the form, although its unclear what the point of all those hidden inputs is since there is nothing that can be edited so you just posting back exactly the same data unchanged (degrading your app and opening yourself to over-posting attacks)