DropDown change show partial - asp.net-mvc

Question

I have used from dropdownlist in page.
I want, when change selected id info, load bottom of page.
first time that page load is true,but with dropdown change load info in new page, not part of current page.
Fill dropdown list
public ActionResult selVahedList(int IdType, int IdChoose)
{
ViewBag.ChooseItem = IdChoose;
IEnumerable<Lcity> Lcitys = Dbcon.Lcitys;
var model = new CityViewMode
{
Lcitys = Lcitys.Select(x => new SelectListItem
{
Value = x.Citycode.ToString(),
Text = x.CityName
})
};
return View(model);
});
Partial view shows after dropdown changed
public ActionResult selVahedListAjax(CityViewMode model)
{
int idcity=Convert.ToInt32(model.SelectedCitycode);
// int idcity = 1;
ViewBag.Reshteh = 1;
//string IdCity = base.Request["SelValue"].ToString();
var res = Dbcon.TaavoniInfos.Where(m => m.IDReshteh == 1 && m.Citycode ==idcity);
return PartialView("selVahedListAjax", res);
}
view page
AjaxOptions ajaxOpts = new AjaxOptions
{
UpdateTargetId = "LoadData",
LoadingElementId="loadAdmin"
};
#using (Ajax.BeginForm("selVahedListAjax",ajaxOpts))
{
<fieldset>
<div class="PContent">
<p class="DroplistCity" id="DroplistCity">
#Html.DropDownListFor(
x => x.SelectedCitycode,
new SelectList(Model.Lcitys, "Value", "Text",""))
<div id="LoadData">
#Html.Action("selVahedListAjax", new { IdReshte = ViewBag.ChooseItem })
</div>
</div>
</fieldset>
}
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#SelectedCitycode').change(function () {
this.form.submit();
});
});
</script>
thanks for your help
my partial view code is: #model
IEnumerable<TaavonS.Models.TaavoniInfo>
<ul>
#foreach (var item in Model)
{
<li>:<b>#Html.DisplayFor(modelItem => item.SName)</b></li>
<li>:<b>#Html.DisplayFor(modelItem => item.ModirName)</b></li>
<li><img src="#Url.Content("~/Content/img/list16.png")" alt=""/>
#Html.ActionLink("detail....", "Detaild",new { codef= item.Scode }, new { #class = "openDialog", data_dialog_id = "emailDialog", data_dialog_title = "" } )
<hr class="separatorLine"/></li> when i load page is true but after dropdownlist is nt work
<li>
#if (!string.IsNullOrEmpty(item.TablighatPic))
{
<img src="#Url.Content("~/Content/img/eye.png")"/> #Html.ActionLink("تبلیغات....", "showImg", new { code = item.Scode }, new { #class = "openImg", data_dialog_id = "mailDialog" })<hr class="separatorLine"/>
}
</li>
}
</ul>

Answer 1

I think you need to change your ajaxOptions:
AjaxOptions ajaxOpts = new AjaxOptions
{
UpdateTargetId = "LoadData",
LoadingElementId="loadAdmin",
InsertionMode = InsertionMode.Replace // add this line
};
Add the parameter to the beginForm call
#using (Ajax.BeginForm("selVahedListAjax",
new { IdReshte = ViewBag.ChooseItem }, //add this to the Ajax.BeginForm call
ajaxOpts ))
{
and remove this line from the target div if you don't want the ajax call performed before the user chooses anything
#Html.Action("selVahedListAjax", new { IdReshte = ViewBag.ChooseItem })