I have this ViewModel which incorporates 3 other viewmodels and a list:
public class GroupPageViewModel{
public string GroupName { get; set; }
public GroupSelectViewModel _groupSelectVM {get; set;}
public List<User> _users { get; set; }
public ViewModelStudent _studentVM { get; set; }
public ViewModelGroupMembers _groupMembersVM { get; set; }
}
In the view I can access each of these sub-ViewModels by Model._groupSelectVM, each of the sub-ViewModels are associated with a partial view. The problem arises when I need to refresh just one or two partial views, I'm not sure how to access the inner ViewModels returned in an Ajax success, and as I'm relatively new to MVC and asp.net in general. And I literally know next to nothing about JavaScript, jquery or Ajax.
How would I go about getting a specific ViewModel from the main ViewModel in an Ajax success?
This is just one example for the clarification requested all the others are pretty much the same (although some of them might need to update mutliple partial views -
From the controller:
[HttpPost]
public ActionResult Index(string groupChoice = "0", string newGroup = "")
{
string groupName = "";
if (groupChoice == "0" && newGroup != "")
{
if (ModelState.IsValid)
{
Group group = new Group
{
GroupName = newGroup,
Active = true
};
db.Groups.Add(group);
db.SaveChanges();
PopulateLists();
}
}
else if (groupList == null)
{
groupList = (List<SelectListItem>)Session["groupList"];
Session["groupName"] = groupName = groupList.Where(m => m.Value == groupChoice).FirstOrDefault().Text;
MembersInSpecificGroup(groupName, groupMembers, groupMembersList);
groupPageVM._groupMembersVM = groupMembers;
}
return View("GroupSelection", groupPageVM);
}
The script:
$(document).ready(function () {
$('#selectedGroup').change(function () {
var data = {
groupChoice: $('#selectedGroup').val()
};
var groupChoice = $('#selectedGroup').val();
$.ajax({
url: '/Group/Index/',
type: 'POST',
data: { groupChoice: groupChoice },
success: function (data) {
setTimeout(function () {
delayGroupSuccess(data);
}, delay);
}
});
})
});
function delayGroupSuccess(data) {
$("#groupSelect").html(data);
}
The main page:
#model EMBAProgram.ViewModels.GroupPageViewModel
#{ Layout = "~/Views/Shared/_Layout.cshtml"; }
<h2>Group Selection</h2>
<div class="row" id="groupSelect">
#{ Html.RenderPartial("_GroupSelect", Model._groupSelectVM);}
</div>
<hr size="5" />
<div style="display: flex;">
<div>
#{Html.RenderPartial("_Students", Model._studentVM);}
</div>
<div>
#{ Html.RenderPartial("_GroupMembers", Model._groupMembersVM);}
</div>
<div>
#{ Html.RenderPartial("_Users", Model._users);}
</div>
<br style="clear: left;" />
</div>
The partial view:
#model EMBAProgram.ViewModels.ViewModelGroupMembers
<div class="table-responsive" id="groupResults">
<table class="table table-condensed table-responsive">
<thead>
<tr>
<th>#Html.DisplayName("M-Number")</th>
<th>#Html.DisplayName("Name")</th>
<th>#Html.DisplayName("Student")</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model._groupVM) {
<tr>
<td>#Html.DisplayFor(m => item.MNumber)</td>
<td>#Html.DisplayFor(m => item.Name)</td>
<td>#Html.DisplayFor(m => item.Student)</td>
</tr>
}
</tbody>
</table>
</div>
Basically I need to be able pull the ViewModel for the partial view from the main ViewModel (which I believe is what is being returned in the Ajax,) and refresh the partial view.
I removed the original answer, it's available in the edit log if folks want to see it I think. But it was taking up too much space and was incorrect.
You can return multiple partial views, I thought it was a built in way to get them to a string (I was in a rush in my comment), but I've got a working example.
In the controller I have the following:
public ActionResult Index()
{
var model = new TestViewModel
{
Students = GetStudents(),
Categories = GetCategories(),
Groups = GetGroups()
};
return View("Index", model);
}
// Returns multiple partial views as strings.
public ActionResult StudentsAndGroups()
{
return Json(new
{
Students = RenderRazorViewToString("_Students", GetStudents()),
Groups = RenderRazorViewToString("_Groups", GetGroups())
}, JsonRequestBehavior.AllowGet);
}
// Creates a string from a Partial View render.
private string RenderRazorViewToString(string viewName, object model)
{
ControllerContext.Controller.ViewData.Model = model;
using (var stringWriter = new StringWriter())
{
var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
var viewContext = new ViewContext(ControllerContext, viewResult.View, ControllerContext.Controller.ViewData, ControllerContext.Controller.TempData, stringWriter);
viewResult.View.Render(viewContext, stringWriter);
viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
return stringWriter.GetStringBuilder().ToString();
}
}
I have my main index view that looks like the following:
<button class="refresh">Refresh</button>
<div class="row">
<div class="col-md-4 students">
#{
Html.RenderPartial("_Students", Model.Students);
}
</div>
<div class="col-md-4">
#{
Html.RenderPartial("_Category", Model.Categories);
}
</div>
<div class="col-md-4 groups">
#{
Html.RenderPartial("_Groups", Model.Groups);
}
</div>
</div>
#section scripts
{
<script type="text/javascript">
$(".refresh").click(function () {
$.get("/Home/StudentsAndGroups", function (d) {
$(".students").html(d.Students);
$(".groups").html(d.Groups);
})
});
</script>
}
The controller action StudentsAndGroups turns two partial views into strings. From there, the javascript calls that view and accesses the elements and returns them.
Helper method for rendering a view as a string was found here: https://stackoverflow.com/a/34968687/6509508
Related
In my ASP.NET Core web application I have a partial view that will need to be placed in several views and be able to respond to dynamic data that will vary based on the view that's rendering this partial at the time. The red box in the image blow represents the area the partial is rendered.
The partial is essentially a Select that will call a Stored Procedure and return a datatable and render out the table to the partial view. I am able to select an option on the page and have it call the SP and see all relevant data from the datatable and can write that out on the page no problem. The problem I am having is that every time the partial refreshes via ajax, the Select returns to the default "Select" value and does not keep the previously selected option selected.
For the sake of brevity, assume that the FeedbackQueries object just contains 4 string elements.
_FeedbackQueryResultPartial.cshtml
#using Contract.Shared;
#model FeedbackQueries
<style>
#select {
margin: auto;
text-align: center;
}
</style>
<div id="feedbackQueryResultPartial">
<div style="height:25px;">
<div id="select">
<select name="StoredProcs" id="StoredProcs" onchange="selectQuery()">
<option value="Select">Select</option>
#foreach (FeedbackQuery query in Model.Queries)
{
#Html.Raw($"<option value='{query.SprocName}'>{query.SprocName}</option>");
}
</select>
</div>
<div id="feedbackQueryDiv" class="row">
#if (Model.FeedbackQueryResults.Rows.Count > 0)
{
<h3>DataTable goes here</h3>
}
else
{
<h3>No rows were returned from your query. Please select another.</h3>
}
</div>
</div>
</div>
Processing.cshtml
#using Contract.Parent
#using Contract.Shared
#model Processing
<script>
function showFeedbackPartial(x, y, z, q) {
$.ajax({
cache: false,
url: '#Url.Action("GetFeedbackQueryDatatable", "Client")',
type: 'POST',
data: { databaseConnectionString: x, storedProcedure: y, page: z, Model: q },
success: function (result) {
var selected = $('#StoredProcs').val();
console.log(selected);
if (result.rowCount > 0) {
console.log(result.rowCount);
var databaseConnectionString = x;
var storedProcedure = y;
var page = z;
var model = q;
var url = '#Url.Action("ViewFeedbackQueryPartial", "Client")';
$("#feedbackQueryResultPartial").load(url, { databaseConnectionString, storedProcedure, page, model });
}
else {
document.getElementById('feedbackQueryDiv').innerHTML = '<h3>No rows were returned from your query. Please select another.</h3>';
}
$('#StoredProcs').val(selected);
$("#StoredProcs option[value='Select']").remove();
}
});
}
</script>
<script>
function selectQuery() {
var e = document.getElementById('StoredProcs');
var ev = e.options[e.selectedIndex].text;
var p = 'Processing';
var model = #Html.Raw(Json.Serialize(Model.FeedbackQueries));
console.log(model);
showFeedbackPartial('#Model.Client.DatabaseConnectionString', ev, p, model);
}
</script>
<script>
$(document).ready(function () {
document.getElementById('feedbackQueryDiv').innerHTML = '<h3>Select a query to view feedback.</h3>';
});
</script>
}
<form method="post" enctype="multipart/form-data">
...
<partial name="_FeedbackQueryResultPartial" for="#Model.FeedbackQueries" />
...
</form>
Controller actions that render the Processing view
[HttpGet]
public IActionResult Processing(int Id)
{
ViewBag.Id = Id;
Processing processing = new Processing();
//Get pertinent information for Client
processing.Client = _clientProcessingService.GetSingleClient(Id, _appSettings.MOPConfigConnectionString);
processing.Client.DatabaseConnectionString = _clientProcessingService.GetClientConnectionFromConfig(processing.Client, _appSettings);
processing.Steps = _clientProcessingService.GetClientSteps(processing.Client.DatabaseConnectionString, "Processing");
processing.CurrMoInfo.CurrMo = _clientProcessingService.GetProcessingCurrMo(processing.Client.DatabaseConnectionString);
processing.FeedbackQueries = _clientProcessingService.GetFeedbackQueriesFromDb(processing.Client.DatabaseConnectionString, "Processing");
return View(processing);
}
[HttpPost]
public IActionResult Processing(Processing Model)
{
//Get pertinent information for Client
Model.Client = _clientProcessingService.GetSingleClient(Model.Client.ClientID, _appSettings.MOPConfigConnectionString);
Model.Client.DatabaseConnectionString = _clientProcessingService.GetClientConnectionFromConfig(Model.Client, _appSettings);
Model.Steps = _clientProcessingService.GetClientSteps(Model.Client.DatabaseConnectionString, "Processing");
Model.CurrMoInfo.CurrMo = _clientProcessingService.GetProcessingCurrMo(Model.Client.DatabaseConnectionString);
Model.FeedbackQueries = _clientProcessingService.GetFeedbackQueriesFromDb(Model.Client.DatabaseConnectionString, "Processing");
return View(Model);
}
Controller action that renders the partial
public IActionResult ViewFeedbackQueryPartial(string DatabaseConnectionString, string StoredProcedure, string Page, FeedbackQueries Model)
{
if(StoredProcedure == "Select")
{
return PartialView("_FeedbackQueryResultPartial", Model);
}
Model.FeedbackQueryResults = _clientProcessingService.GetFeedbackQueryDataTable(DatabaseConnectionString, Page, StoredProcedure);
return PartialView("_FeedbackQueryResultPartial", Model);
}
I have tried so many different ways of maintaining this value. Adding it to the model, adding it to the Viewbag and countless other methods of attempting to retain this value somewhere and regardless of success or failure, keep the value and change it to the selected option via javascript. It resets to "Select" every time the partial is reloaded after the ajax call is made.
This also presents another problem wherein, when I submit the form on the Processing view by clicking RUN the page will refresh and go to the next step in the process but ideally what should also happen is that the value in the partial is kept, the query is ran again and the user doesn't need to select a new value at any point unless they want to run a different SP to see different data in the table.
Is this even possible or am I trying to do this the entirely wrong way?
For your issue, you may need to pass the selected SprocName from Parent View to partial view with Model.
Add SelectedSprocName to FeedbackQueries
public class FeedbackQueries
{
public string SelectedSprocName { get; set; }
public List<FeedbackQuery> Queries { get; set; }
public FeedbackQueryResults FeedbackQueryResults { get; set; }
}
Change View to set SelectedSprocName
function showFeedbackPartial(x, y, z, q) {
$.ajax({
cache: false,
url: '#Url.Action("GetFeedbackQueryDatatable", "Process")',
type: 'POST',
success: function (result) {
var selected = $('#StoredProcs').val();
model.SelectedSprocName = selected;
var url = '#Url.Action("ViewFeedbackQueryPartial", "Process")';
$("#feedbackQueryResultPartial").load(url,{ databaseConnectionString, storedProcedure, page, model });
console.log('after load' + selected);
// your rest code
}
});
}
Partial View set selected option
#foreach (FeedbackQuery query in Model.Queries)
{
if (query.SprocName == Model.SelectedSprocName)
{
#Html.Raw($"<option value='{query.SprocName}' selected='true'>{query.SprocName}</option>");
}
else
{
#Html.Raw($"<option value='{query.SprocName}'>{query.SprocName}</option>");
}
}
i am trying to bind my data to a html table in my view, how do i go about this
public ActionResult FlugTopAir()
{
DataModel db = new DataModel();
var test = db.Database.SqlQuery<FlugTopAirData>("exec sp_FlugTopAir").ToList();
return Json(test, JsonRequestBehavior.AllowGet);
}
public class FlugTopAirData
{
public string Airline { get; set; }
public double Spend { get; set; }
public double TA { get; set; }
}
That will depend on the client side framework that you use.
If you are looking for the native js here is the link:
https://www.w3schools.com/js/js_json_html.asp
You could use jQuery Ajax to call that controller action. Like below
<table class="table">
<thead>
<tr>
<td>Airline</td>
<td>Spend</td>
<td>TA</td>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
#section scripts{
<script type="text/javascript">
$.ajax({
url: '#Url.Action("FlugTopAir")',
type: 'GET',
cache: false,
success: function (result) {
var rows = result.map(function (record) {
var row = $("<tr></tr>");
var airline = $("<td></td>").html(record.Airline);
var spend = $("<td></td>").html(record.Spend);
var ta = $("<td></td>").html(record.TA);
row.append(airline, spend, ta);
return row;
});
$("#tableBody").append(rows);
}
});
</script>
}
You should probably consider using some template engine like JSRender for this to be honest.
Or the easiest way would be to return the view with model so you can use Razor syntax to iterate through Model from the view
View (Index.cshtml)
#using MVCTestApp.Models
<table class="table">
<thead>
<tr>
<td>Airline
<td>Spend</td>
<td>TA</td>
</tr>
</thead>
#foreach (TestModel testModel in Model)
{
<tr>
<td>#testModel.Airline</td>
<td>#testModel.Spend</td>
<td>#testModel.TA</td>
</tr>
}
</table>
In controller, instead of returning Json, return View
return View(test);
I have a Model on my CSHTML page that which I use this way:
#model Web.Models.Element
#using (Html.BeginForm("Search", "Company"))
{
#Html.HiddenFor(c => c.Person)
<div class="panel panel-default">
<div class="panel-heading"> Company Search</div>
<div class="panel-body collapse" id="screenCompanySearch">
<form id="formSearch" name="formSearch" method="post">
<fieldset style="margin: 20px;">
<legend>Search</legend>
<div class="row">
<div class="col-xs-2 col-sm-2">
#Html.Label("Company Name")
#Html.TextBoxFor(c => c.Company.Name, new { #class = "form-control" })
</div>
</fieldset>
</form>
</div>
</div>
My Javascript function is called by a button click this way:
$("#btnSearch").on("click", function() { searchCompany(); })'
In my JavaScript function I need to get this Model entirely loaded with the TextBoxFor values:
<script type="text/javascript">
function searchCompany() {
var data = $("#formSearch").serialize();
$.ajax({
url: "#(Url.Action("SearchCompany", "Company"))",
cache: false,
data: data,
type: "POST",
success: alert("sucesso!")
});
}
</script>
My Controller method is being loaded correctly, but the model passed in the Ajax "data" parameter is not filled with the TextBoxFor values.
This is my Controller ActionResult for the View:
public ActionResult Consulta()
{
Element model = new Element();
model.Person = new Person();
return View(model);
}
What is happening is that my Model is being instantiated on my Controller but the values from the TextBoxFor is not recorded on the properties of the Model.
How can I solve this? Thanks for now.
UPDATED
<div class="col-xs-2 col-sm-2">
#Html.Label("Person Name")
#Html.TextBoxFor(c => c.Person.Name, new { #class = "form-control" })
</div>
So, 'c' equals my Element object. When I reach the Controller Method "Search", the parameter Element passed via ajax call does not instantiate the Element.Person which gives me Person = null.
In my ActionResult I have:
Element model = new Element();
model.Person = new Person();
Element class:
public Element()
{
this.Contacts = new List<Contact>();
this.DataType = new DataType();
}
public int ID_Element { get; set; }
public int ID_ElementType { get; set; }
public virtual List<Contact> Contacts { get; set; }
public virtual DataType DataType { get; set; }
public virtual Person Person {get; set; }
Controller Action
[HttpPost]
public JsonResult SearchCompany(Element model)
{
...
}
The serialize method is not giving your the serialized version of the form because you have nested form tags.
The #using (Html.BeginForm("Search", "Company")) will create an outer form tag and you have your other form inside that, hence creating a nested form structure. Nested forms are invalid. You can have 2 forms in the same page, parallel to each other, not nested.
If you fix the nested form issue, the serialize method will give you valid string for you form inputs.
#using (Html.BeginForm("Search", "Company"))
{
<!-- Your other form -->
}
<form id="formSearch" name="formSearch" method="post">
<fieldset style="margin: 20px;">
<legend>Search</legend>
<div class="col-xs-2 col-sm-2">
#Html.Label("Company Name")
#Html.TextBoxFor(c => c.Company.Name, new { #class = "form-control" })
</div>
</fieldset>
</form>
Keep in mind that, the serialize method will give you the input element values of items inside this specific form. If you want to send some other data (ex : Id), you need to keep that in an input field inside this form.
I have a MVC project using Kendo controls. On one of the views is a drop down box and text box. Both are initially getting their values from the model. How can I change the model (and therefore the text box) when the user selects an item from the drop down?
For example, the Model is filled in the controller setting the original value of the item the drop down box is based on to "General" and the item the text box is based on to "Widgets". When the user selects "Special" from the drop down, the controller would query the database to get data based on "Special", find that the new value of the text box should say "Doodads", add "Doodads to the model and change the text box to "Doodads".
View
#model GPC.Models.ModelInstrumentListingDetail
#using (Html.BeginForm("InstrumentListingDetailClick", "Home", FormMethod.Post, new { id = "InstrumentListingDetailForm" }))
{
<div id="divInstrumentListingDetailHeader" class="detailDivs">
<table>
<tr>
<tr>
<td style="text-align: right;" class="dropdowns">
<label>Category:</label>
</td>
</tr>
</table>
</div> // divInstrumentListingDetailHeader
<div id="divInstrumentListingDetailBody" class="detailDivs details">
<table class="details">
#*Field 1*#
<tr>
<td style="text-align: right;">
#Html.DisplayFor(m => m.Label1)
</td>
<td width="2px;"> </td>
<td class="dropdowns">
#Html.TextBoxFor(m => m.Field1, new { #class = "details" })
</td>
</tr>
</table>
</div> // divInstrumentListingDetailBody
}
<script>
function onChange_ddInstrumentCategory(arg) {
var categoryID = $(arg).find('option:selected').val();
// Update model based on the category ID
}
</script>
Controller
public ActionResult InstrumentListingEdit(TblInstrumentTag model)
{
TblInstrumentTag currentInstrumentTag = data.GetInstrumentTagByID(model.InstrumentTagID);
// Fill Category drop down
List<TblInstrumentFormCategory> categories = data.GetAllCategories();
// Create model
ModelInstrumentListingDetail detailModel = new ModelInstrumentListingDetail
{
InstrumentTagID = currentInstrumentTag.InstrumentTagID,
InstrumentCategory = categories.FirstOrDefault().InstrumentFormCategoryID,
Field1 = currentInstrumentTag.FormCategory1Value1,
Label1 = categories.FirstOrDefault().Label1 + ":",
ieInstrumentCategories = new SelectList(categories, "InstrumentFormCategoryID", "InstrumentFormCategoryName")
};
return View("InstrumentListingEdit", detailModel);
}
Model
public class ModelInstrumentListingDetail
{
// Drop down ID's
public int InstrumentTagID { get; set; }
public int InstrumentCategory { get; set; }
// Detail fields
public string Field1 { get; set; }
// Detail labels
public string Label1 { get; set; }
// Drop downs for add/edit page
public IEnumerable<SelectListItem> ieInstrumentCategories { get; set; }
}
What I'd like is to get from the javascript to something like this code below to update the text box. I'd rather not post the entire page. I don't want the screen to "blink"; I just want the user to select an item from the dropdown and for the textbox value to change.
Need to get from jQuery to something like this without submitting the form:
public ActionResult UpdateModel(TblInstrumentTag model, int newCatgoryID)
{
TblInstrumentTag currentInstrumentTag = data.GetInstrumentTagByID(model.InstrumentTagID);
// Fill Category drop down
List<TblInstrumentFormCategory> categories = data.GetAllCategories();
// Create model
ModelInstrumentListingDetail detailModel = new ModelInstrumentListingDetail
{
InstrumentTagID = currentInstrumentTag.InstrumentTagID,
InstrumentCategory = categories.FirstOrDefault().InstrumentFormCategoryID,
Field1 = currentInstrumentTag.FormCategory2Value1, // <- Value of Field 1 has changed
Label1 = categories.FirstOrDefault().Label1 + ":",
ieInstrumentCategories = new SelectList(categories, "InstrumentFormCategoryID", "InstrumentFormCategoryName")
};
return View("InstrumentListingEdit", detailModel);
}
JQuery is a good place to start. If I understand correctly, you only want to query the DB after changing the drop down's value, and then changing the value of the textbox to the corresponding change.
JQuery:
$(document).ready(function(){
$('#myDropDown').change(selectionChange());
});
function selectionChange() {
var dropDownValue = $('#myDropDown').val();
var textBox = $('#myTextBox');
$.ajax({
url: "/mycontroller/querydb",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(dropDownValue),
success: function (data, status) {
textBox.val(data);
},
type: "post"
});
return;
}
Controller:
[HttpPost]
public JsonResult QueryDB(string dropDownValue)
{
string newTextBoxValue = string.Empty;
//your db code
return Json (newTextBoxValue) );
}
It's a fairly watered down version of a JQuery AJAX to MVC Controller deal. Hopefully it will work for you!
I'm trying to load a partial view using JavaScript, in turn the partial view will have a View Bag", to loop through.
All is working well, until I try to render the partial view I get an "object Object" error, if I remove the View bag loop the partial view loads
Controller
[HttpPost]
public ActionResult ServiceDetails(int id )
{
int count = 0;
var m = from c in db.ServiceCategoryFields
where c.serviceTypeID == id
select c;
ViewBag.count = count;
ViewBag.m = m.ToList();
return PartialView(m.ToList());
}
Partial View
<table style ="width:100% ">
<tr>
#foreach (var image in (List<String>)ViewBag.m)
{
<td>
#image
</td>
}
</tr>
JS File
type: "POST",
success: function (data) {
display.html('');
display.html(data);
},
error: function (reponse) {
alert("JS Error : " + reponse.toString());
}
Quick Solution
Based on your controller code below
[HttpPost]
public ActionResult ServiceDetails(int id )
{
int count = 0;
var m = from c in db.ServiceCategoryFields
where c.serviceTypeID == id
select c;
ViewBag.count = count;
ViewBag.m = m.ToList();
return PartialView(m.ToList());
}
ViewBag.m would be an instance of List<ServiceCategoryField>, but you convert it to List<string> in the partial view
#foreach (var image in (List<String>)ViewBag.m)
so you got the error. Assuming that PropertyName is the property of ServiceCategoryField with the value that you want to display inside <td> tags, you need to convert ViewBag.m to List<ServiceCategoryField> in the partial view as below
<table style ="width:100% ">
<tr>
#foreach (var image in (List<ServiceCategoryField>)ViewBag.m)
{
<td>
#image.PropertyName
</td>
}
</tr>
Alternative Solution
The previous solution requires converting ViewBag.m and it could produce runtime errors if you convert ViewBag.m to the wrong type. You can avoid the conversion in the partial view by using this alternative solution.
The first thing to do is creating a model class that will be used by the partial view, let's say the class name is ServiceDetailsViewModel and it has Count and Images property
public class ServiceDetailsViewModel
{
public int Count { get; set; }
public List<string> Images { get; set; }
}
Create an instance of ServiceDetailsViewModel, assign the properties, and pass model to the partial view in the controller. I assume PropertyName is a string and c.PropertyName is where the image in the partial view comes from
[HttpPost]
public ActionResult ServiceDetails(int id )
{
int count = 0;
var m = from c in db.ServiceCategoryFields
where c.serviceTypeID == id
select c.PropertyName;
ServiceDetailsViewModel model = new ServiceDetailsViewModel();
model.Count = count;
model.Images = m.ToList();
return PartialView(model);
}
Set ServiceDetailsViewModel as the model by using the below syntax at the top of your partial view code
#model ServiceDetailsViewModel
and loop through Model.Images as below
<table style ="width:100% ">
<tr>
#foreach (var image in Model.Images)
{
<td>
#image
</td>
}
</tr>