CODEWITHSUNDEEP
jqueryhtmljsonasp.net-mvc
Arc_75
Arc_75

Reputation: 59

Refreshing data in ViewBag

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 [email protected] /> @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 [email protected] /> @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?

Upvotes: 0

Views: 676

Answers (3)

Arc_75
Arc_75

Reputation: 59

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!

Upvotes: 0

Piotr Kula
Piotr Kula

Reputation: 9811

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.

Upvotes: 1

CMartins
CMartins

Reputation: 3293

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>');

Upvotes: 0

Related Questions