I know there are similar questions to my situation however I have tried the answers below and none of them seem to be solving my issue:
- Render Partial View Using jQuery in ASP.NET MVC
- How to load partial view via jQuery?
- How to return Json data to a partial view
I will explain in detail why but first I will let you know what I need:
I have a Partial View inside my main view. Both, (partial and index) are using a model IEnumerable.
Partial View Section on my Index
div runat="server" id="bulkEditView" style="display:none;">
<hr />
@(Html.DevExtreme().Sortable().ID("sortable")
.MoveItemOnDrop(true)
.Filter(".dx-tab")
.ItemOrientation(Orientation.Horizontal)
.DragDirection(DragDirection.Horizontal)
.OnReorder("onReorder")
.Content(@<text>@Html.Partial("BulkEditPartial") </text>))
</div>
When the Index page loads, the partial view is hidden and does not have any information yet until the user makes a selection from the grid and chooses an option from a pop up. The pop up contains a select box that, once the user saves the selection, it will make a call to a function with an AJAX GET Request.
AJAX
$.ajax({
url: '@(Url.Action("LoadDataAnswerFields", "DataMaintenance"))?CategoryId=' + selectedCategory + dataAnswerIdValues,
contentType: "application/json; charset=utf-8",
type: "GET",
success: function (resultingData) {
arrayFields = resultingData.Categories[0].Fields;
bulkEditDataAnswers = getMappedDataAnswers(resultingData);
$("#editGridMessagesPopup").dxPopup("hide");
//The following get call was used based on an Answer I have also found in StackOverflow but it did not work because it returned a type List and expects IENUMERABLE
$.get( '@(Url.Action("ReloadPartialView", "DataMaintenance"))?CategoryId=' + selectedCategory + dataAnswerIdValues, function(data) {$('#outputContainer').html(data);});
//End of that code
return dataAnswerFields;
},
error: function (jqXHR, textStatus, errorThrown) {
$("#loading-popup").dxPopup("hide");
}
});
If success, the resulting data will be modified so that the partial view will show up with the values I wanted in Section #2 of the Partial view that has a DevExtremeList component.
<div style="display:flex;justify-content: center;">
<div style="width:45% ; margin-top: 45px;">
<div id="section1">
//This is where I am supposed to load the rest of the data after the AJAX success
//returns the results I need
</div>
</div>
<div id="section2" style="width:45%">
<h5>Current Values</h5>
@(Html.DevExtreme().List()
.ID("listCurrentValues")
.Height("100%")
.Grouped(true)
.CollapsibleGroups(false)
.OnGroupRendered(@<text>
onGroupRendered
</text>)
.GroupTemplate(@<text>
<div><%- key %></div>
</text>)
.DataSource(new JS("currentDataAnswersValues"))
)
</div>
</div>
This is working fine, however, the Section#1 of the partial view, will also need to render the result of this AJAX and add some input fields with the value name. I was able to dinamically create a Div element which contains these values and added an ID so that I could reference it in the Partial View.
However, the Partial View does not recognizes this ID therefore it does render the elements at the bottom of the Index Page instead.
Things I have already tried:
- Use a ViewBag to load the data and loop through it in the partial View:
Did not work because the partial View is being rendered before and the method requires user selection therefore it cannot be done onPageLoad.
- I cannot modify my controller and make it return a PartialView & model:
This is because there are several functions in my JS that are already expecting a JSON result to manipulate and clean the data. In addition to this, whenever I tried to look for a way to return a Partial View from my Controller, I kept getting errors such as item passed into the dictionary is of type 'System.Collections.Generic.List and is expecting IEnumerable.
EDIT #1
This is another response that keeps coming up with a possible solution to my issue:
- https://www.c-sharpcorner.com/UploadFile/manas1/sending-partialview-using-jquery-ajax-request-in-Asp-Net-mvc/ However one thing I would like to add, in case it was still not clear, is that I need to manipulate the resulting data from my AJAX response before calling the "Section1" of my partial View. This is the function that I currently have which actually returns exactly what I need:
//This was based on an example I found online on how to dinamically render div elements and add their respective values.
function addElement(currentDataAnswersValues) {
// create a new div element
var header = document.getElementById("bulkEditView");
var createLevelDiv = header.appendChild(document.createElement('div'));
createLevelDiv .id = 'Level1';
//const createLevelDiv = document.createElement("div");
//newDiv.id = 'parentRow';
for (var i = 0; i < currentDataAnswersValues.length; i++) {
createLevel1CellTag.appendChild(document.createTextNode(currentDataAnswersValues[i].key));
createLevel1CellTag.appendChild(document.createElement("br"));
}
console.log(createLevel1CellTag)
}
I just cannot find a way to send this to the Partial View and load it to the respective Div, reason why I wanted to ask for help on this matter.
EDIT #2
[HttpGet]
public ActionResult LoadDataAnswerFields(BulkDataAnswer bulkDataAnswer)
{
int categoryId = bulkDataAnswer.CategoryId;
var result = new { Categories = _dataMaintenanceRepository.GetAllCategoryFieldsbyId(categoryId), DataAnswerValues = _dataMaintenanceRepository.GetValuesByCategory(bulkDataAnswer) };
ListDataAnswerEntity categoryEntityValues = new ListDataAnswerEntity();
categoryEntityValues.categoryValues = result.Categories[0].Fields;
ViewBag.BulkEditPartialCategory = result.Categories[0].Fields;
return Json(result, JsonRequestBehavior.AllowGet);
}
This is what the actual method in my controller is returning. After doing some more research to see if I could attempt again to change the return type to a Partial View, I've realized this will not be possible at the moment because of the manipulation of the elements that need to happen with the JSON result. There are too many things that need to be "clean" in the data therefore changing this return to a View will still definitely not work. Hope someone can help me figuring this out.
EDIT#3 Updating this ticket:
I have checked more information and I was able to create a function which dynamically created some div elements and append them to the view. This kind of worked but the situation is that I need the input fields to be added like any other devextreme(Razor) element, which will allow me to preload some data in case the typeId of the element is a selectbox,tagbox, etc. So even though it was close to fixing my issue, it is still missing an important part.
