locked
Need to load partial view (including model) on the change of a dropdown list value? RRS feed

  • Question

  • User-234441352 posted

    Hi, 

    We have developed an application similar to CMS. Layout/Pages can be designed in it.  

    Multiple Widget can be appended in pages and each widget is a complete user control. (like a sub pages or for result views)

    So we developed such generic logic in which multiple widgets can be rendered dynamically. Not just partial views are rendered dynamically but also their model are being passed dynamically through iterations (foreach).

    Now my issue is that I have to add a dropdown list and when we 'll select any value from drop down list then my whole view need to be re-filled with all model objects.

    Can anyone guide me quickest way for it or 'll I have to use ajax ? if I 'll use ajax then how 'll I guarantee  about the data consistency ?

    Monday, November 26, 2018 6:21 PM

Answers

  • User475983607 posted

    It is a bit odd that you have the skill set to build a CMS but not add a select.  Populating select is very simple using the DropdownList() or DropDownListFor() helpers. Pass the select content in ViewBag if you do not want to add to the model properties.

    Is there anyway you can provide source code that reproduces this issue?  It's helpful to see the custom CMS code so we know how to approach the problem.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 26, 2018 6:41 PM
  • User475983607 posted

    Now please share your knowledge about on the change of drop down list, only one widget should be re-filled with different data sets. On the bases of selecting low value from the drop down list, All widgets data should be sorted in ascending order and on the bases of selecting high value, widget data should be sorted in descending order.  

    If the data is rendered in the DOM then I'll simply sort the DOM elements.  If there is a need to fetch data from a server then I lean toward XHR (AJAX).

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 26, 2018 7:31 PM
  • User475983607 posted

    I can't use DOM because I 'll have to sort all server data. So XHR(AJAX is must).  Now please see my first post.

    I can easily add a div and can use that div to load this partial view on the bases of selection of drop down list using AJAX.

    The DOM (Document Object Model) is the result loading HTML in the browser.  JavaScript programs can easily update the DOM ie. sort elements or even create dynamic HTML.   It is not clear why sorting must occur on the server.

    The best place to learn jQuery/AJAX is from the openly published documentation.

    http://api.jquery.com/jquery.ajax/

    Suppose I am sending through 

    onchange event of dropdownlist.

    Like  onchange="return ChangeSortingDDL('@JSON.Encode(DynamicalModel))" .

    Will it work or I 'll have to do something for it ?

    Aside from the logical and syntax errors, the ChangeSortingDDL() function must know what type to expect and what item to sort.

    After passing into JavaScript function, 'll it be able to use it in Ajax ( by passing to Partial View)

    I'm not sure what you are asking.  The jQuery/AJAX function passes data from the browser to a controller action.  The action passes arguments to the partial, invokes the partial, and returns the results to the calling AJAX function.  Finally, the AJAX "done handler" processes the action results.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 26, 2018 8:44 PM
  • User-474980206 posted

    when using ajax, you need to decide how to render your html. there are two common approaches 

    1) the ajax returns a json object, and client templates are used to rerender the content. in this context your widgets are generally javascript components that map json to html.

    2) the ajax returns html (with mvc, usually a razor partial view), that is used to replace the content in a div.

    when calling ajax, the parameters can be dynamic (built by javascript) or static (built by the server)

      onchange="return ChangeSortingDDL('@JSON.Encode(DynamicalModel))" .

    makes no sense. JSON.Encode() is a server function run when the page is rendered. it converts a json string to an object. the @ renders an object as a string to html. converting an object to a string return the class name of that object. if you meant to pass the server model back with the ajax call, it would be:

      onchange='ChangeSortingDDL(@Html.Raw(JSON.Serialize(Model)));' 

    where ChangeSortingDDL() is a javascript function that makes an ajax call.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 26, 2018 9:14 PM

All replies

  • User475983607 posted

    It is a bit odd that you have the skill set to build a CMS but not add a select.  Populating select is very simple using the DropdownList() or DropDownListFor() helpers. Pass the select content in ViewBag if you do not want to add to the model properties.

    Is there anyway you can provide source code that reproduces this issue?  It's helpful to see the custom CMS code so we know how to approach the problem.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 26, 2018 6:41 PM
  • User-234441352 posted

    Hi Mgebhard,

    Perhaps you didn't get my points that's why you are thinking like this.

    Simple , there is a drop down whatever I use DropDownListFor or simple select, It 'll not be helpful because there is nothing to bind but just two hardcoded values.

    First one is low and second one is high.

    Now please see carefully what I am saying here is important:

    Dropdown is independent. We don't need the viewbag here for drop down. Its simple

    There is a Dynamic Model which is being used for different kind of widgets. Widget is just a partial view (with the combination of controls).

    If we opened a page then it can be possible that there would be 10 to 20 widgets on it.


    One View is calling Partial Views for all kind of widgets and for all pages and it is being called through nested loop.

    Now please share your knowledge about on the change of drop down list, only one widget should be re-filled with different data sets. On the bases of selecting low value from the drop down list, All widgets data should be sorted in ascending order and on the bases of selecting high value, widget data should be sorted in descending order.  

    Now please propose your solution.  May be due to security reasons, I 'll not be able to share the code.

    But I 'll to write some sample example then 'll share it with you.

    Monday, November 26, 2018 7:14 PM
  • User475983607 posted

    Now please share your knowledge about on the change of drop down list, only one widget should be re-filled with different data sets. On the bases of selecting low value from the drop down list, All widgets data should be sorted in ascending order and on the bases of selecting high value, widget data should be sorted in descending order.  

    If the data is rendered in the DOM then I'll simply sort the DOM elements.  If there is a need to fetch data from a server then I lean toward XHR (AJAX).

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 26, 2018 7:31 PM
  • User-234441352 posted

    Yes that is what I was saying. 

    I can't use DOM because I 'll have to sort all server data. So XHR(AJAX is must).  Now please see my first post.

    I can easily add a div and can use that div to load this partial view on the bases of selection of drop down list using AJAX.

    Now next thing is: I 'll have to send that dynamic model (including all objects detail) in the each iteration of the loop.

    Suppose I am sending through 

    onchange event of dropdownlist.

    Like  onchange="return ChangeSortingDDL('@JSON.Encode(DynamicalModel))" .

    Will it work or I 'll have to do something for it ?

    After passing into JavaScript function, 'll it be able to use it in Ajax ( by passing to Partial View)

    Monday, November 26, 2018 7:53 PM
  • User475983607 posted

    I can't use DOM because I 'll have to sort all server data. So XHR(AJAX is must).  Now please see my first post.

    I can easily add a div and can use that div to load this partial view on the bases of selection of drop down list using AJAX.

    The DOM (Document Object Model) is the result loading HTML in the browser.  JavaScript programs can easily update the DOM ie. sort elements or even create dynamic HTML.   It is not clear why sorting must occur on the server.

    The best place to learn jQuery/AJAX is from the openly published documentation.

    http://api.jquery.com/jquery.ajax/

    Suppose I am sending through 

    onchange event of dropdownlist.

    Like  onchange="return ChangeSortingDDL('@JSON.Encode(DynamicalModel))" .

    Will it work or I 'll have to do something for it ?

    Aside from the logical and syntax errors, the ChangeSortingDDL() function must know what type to expect and what item to sort.

    After passing into JavaScript function, 'll it be able to use it in Ajax ( by passing to Partial View)

    I'm not sure what you are asking.  The jQuery/AJAX function passes data from the browser to a controller action.  The action passes arguments to the partial, invokes the partial, and returns the results to the calling AJAX function.  Finally, the AJAX "done handler" processes the action results.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 26, 2018 8:44 PM
  • User-474980206 posted

    when using ajax, you need to decide how to render your html. there are two common approaches 

    1) the ajax returns a json object, and client templates are used to rerender the content. in this context your widgets are generally javascript components that map json to html.

    2) the ajax returns html (with mvc, usually a razor partial view), that is used to replace the content in a div.

    when calling ajax, the parameters can be dynamic (built by javascript) or static (built by the server)

      onchange="return ChangeSortingDDL('@JSON.Encode(DynamicalModel))" .

    makes no sense. JSON.Encode() is a server function run when the page is rendered. it converts a json string to an object. the @ renders an object as a string to html. converting an object to a string return the class name of that object. if you meant to pass the server model back with the ajax call, it would be:

      onchange='ChangeSortingDDL(@Html.Raw(JSON.Serialize(Model)));' 

    where ChangeSortingDDL() is a javascript function that makes an ajax call.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 26, 2018 9:14 PM