Home Refreshing data in ViewBag
Reply: 3

Refreshing data in ViewBag

Arc_75
1#
Arc_75 Published in 2018-02-14 09:36:44Z

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?

Carlos Martins
2#
Carlos Martins Reply to 2018-02-14 09:53:20Z

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>');
ppumkin
3#
ppumkin Reply to 2018-02-14 10:47:29Z

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.

Arc_75
4#
Arc_75 Reply to 2018-02-14 11:53:50Z

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!

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.316618 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO