Refreshing data in ViewBag

Question

I have 2 custom lists of radiobuttons on view, which I fill with cycles:

<div class="mutliSelectCat">
    <ul>
        @foreach (var cat in Model.Categories)
        {
            <li>
                <label><input name="Category" type="radio" id=catid value=@cat.Name /> @cat.Name</label>
            </li>
        }
    </ul>
</div>

<div class="mutliSelectSub">
    <ul>
        @foreach (var subCat in ViewBag.subs)
        {
            <li>
                <label><input name="subCategory" type="radio" id=subcatid value=@subCat.Name /> @subCat.Name</label>
            </li>
        }
    </ul>
</div>

So when I select an option in first list, I want to update the second list:

$('.mutliSelectCat input').on('click', function () {
    var title = $(this).val();
    $.get("/Review/GetSubCategories", { catname: title }, function (data) {
    });


public ActionResult GetSubCategories(string catname)
{
    ViewBag.subs = //getting data from db and sorting it
    return Json(new { result = ViewBag.subs}, JsonRequestBehavior.AllowGet);
}

The question is: how can I update the list of subcategories? Can I somehow update the viewbag data on view, or I need to refresh "multiselectsub" div?

score 1 · Answer 1 · answered Feb 14 '18 at 10:47

Server Side

Use a partial view. Everytime you change something submit the data, regenerate the viewbad and replace it with what ever you need.

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))

https://stackoverflow.com/a/5410121/706363

Client Side

Use jquery to manipualte the target list by either filtering it or doing ajax calls to an endpoint. You will have to write all the javascript and endpoints manually to handle that

Conclusion

I would say stick with server side (using Razor Helpers) becuase it is easier to use and does all the heavy lifting for you. You do not have to write any JS, the backend uses Partial Views and is as fast in execution as writting your own javascript, minus all the complexity of maintaing JS logic.

score 0 · Answer 2 · answered Feb 14 '18 at 09:53

0

You should add an ID to the second list like:

<ul id="subCat">

To append an element to the subCat list you should do:

$("#subCat").append('<li>' + yourValue + '</li>');

answered Feb 14 '18 at 09:53

CMartins

3,247
5
38
53

Hmm. I got the idea. Not sure if it`s my fault, but I tried to make the code string in controller and return it to the js function as already premade string with all the tags. they I simply do : $("#subCat").Append(data); .. And this dont work :( – Arc_75 Feb 14 '18 at 10:28
Please try to check your data value if it logs some content – CMartins Feb 14 '18 at 11:53

score 0 · Answer 3 · answered Feb 14 '18 at 11:53

The way provided buy @Carlos Martins was almost right. So here is how I solve that:

View: this is the only thing that was changed:<ul id="subCat">

JS:

 $('.mutliSelectCat input').on('click', function () {
        var title = $(this).val();
        $.get("/Review/GetSubCategories", { catname: title }, function (data) {
            $("#subCat").html(data.result);
        });

Controller part:

string responce = "";
//subs is a list of subcategories, which was filled from db
foreach (var sub in subs)
{
     responce += String.Format("<li><label><input name=\"subCategory\" type=\"radio\" id=\"{0}\" value=\"{1}\" />{1}</label></li>", sub.SubCategoryId, sub.Name);
    }
return Json(new { result = responce}, JsonRequestBehavior.AllowGet);

Thanks for help!

Refreshing data in ViewBag

3 Answers3