user2448412 user2448412 - 1 month ago 12
Ajax Question

.NET MVC Ajax.ActionLink not returning partial view

I have been researching and trying multiple failed attempts FOR DAYS to get my partial view to display within my main view using Ajax.actionlink. When using the developer tools and viewing the Network tab, I do see the request. When clicking on Preview, I can see the correct data within the partial view. No jQuery errors.

View

@model IEnumerable<NS.Models.FeeAuth>

@using (Html.BeginForm())
{
<p>
<span class="glyphicon glyphicon-search"></span> Find by Last Name: @Html.TextBox("SearchString")
<input type="submit" value="Search" />
</p>
}

<div class="table-responsive">
<table class="table table-condensed" style="border-collapse:collapse;">
<tr>
<th>
@Html.LabelFor(m => m.First().ID)
</th>
<th>

@Html.ActionLink("Request ID", "ApprovalIndex", new { sortOrder = ViewBag.RequestIDSortParam })
</th>
<th>
@Html.Label("emplid", "Student Emplid")
</th>

</tr>
@{int i = 0;}
@foreach (var item in Model)
{

<tr data-toggle="collapse" data-parent="#collapse1_@i" data-target="#collapse1_@i" class="accordion-toggle">
<td>

@Ajax.ActionLink(Html.Encode(item.ID),
"SelectedSTRMS",
"FeeAuth",
new { id = item.ID, requestId = item.requestID },
new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "SelectedSTRMList" + i,
InsertionMode = InsertionMode.Replace

})

</td>

<td>
@Html.DisplayFor(modelItem => item.requestID)
</td>
<td>
@Html.DisplayFor(modelItem => item.emplid)
</td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div class="accordion-body collapse" id="collapse1_@i">
<div id="SelectedSTRMList_@i">

</div>
</div>
</td>

</tr>
i++;
}
</table>
</div>


Partial View

<table>

<tr>
<td>
<ul>

@foreach (var s in (List<string>)ViewBag.SemesterInfo)
{
<li style="padding-bottom:20px;">@s</li>
}

</ul>

</td>
</tr>

</table>


Jquery in _Layout.cshtml

<script src="~/Scripts/jquery-2.1.3.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>


Controller

[HttpGet]
public PartialViewResult SelectedSTRMS(int id, int requestId)
{

FeeAuthWithCommentsViewModel feeauth = new FeeAuthWithCommentsViewModel();
feeauth.FeeAuth = db.FeeAuths.Find(id);

int feeauthID = id;
List<string> GetSTRM = new List<string>();

GetSTRM = db.vw_GetSTRMs.Where(v => v.FeeAuthID == feeauthID).Select(v => v.DESCR).ToList();

if (GetSTRM.Count > 0)
{
ViewBag.SemesterInfo = GetSTRM.ToList();
}
else
{

ViewBag.SemesterInfo = new List<string> { "No STRM Selected" };
}

return PartialView("_SelectedSTRMS");
}

Answer

Your update target is:

UpdateTargetId = "SelectedSTRMList" + i,

But your div id is:

<div id="SelectedSTRMList_@i">

In other words, you're either missing an _ in the update target string or you need to remove the _ in your div id.