WIZKID WIZKID - 7 months ago 19
Javascript Question

asp.net - Manipulate Page Content

I was wondering if anyone could explain how to manipulate content for various sections of a page depending on if a button is clicked. I think what I am looking for is similar to an include in php. I wasnt sure if asp.net had a way to do the same (partial view?) or if bootstrap/jquery is the way to go. I've included a .png to illustrate what I am trying to do.

I would like section b's content to change based on what button is selected in section A. While not necessarily relevant to this question.. I then would like various user inputs in section B to manipulate existing content in section C.

enter image description here

Answer

In your controller, have an action that returns a PartialView:

public PartialViewResult MyPartial(string someText)
{
    var model = new MyPartialModel {SomeStuff = someText};
    return PartialView(model);
}

Create the model and partial view as you would any other:

public class MyPartialModel
{
    public string SomeStuff { get; set; }
}

Partial View:

@model ExampleApp.Models.MyPartialModel

@Html.TextBoxFor(m => m.SomeStuff)

Then on your page you can load in your partial via ajax with jQuery:

<div>
    <button type="button" id="load-partial">Load The Partial!</button>
</div>

<div id="section-b"></div>

@section Scripts{
    <script>
        $(document).ready(function () {
            $('#load-partial').click(function () {
                $.get('MyPartial', { sometext: "Hello!" }).done(function (data) {
                    $('#section-b').html(data);
                });
            });
        });

    </script>
}

Edit to answer comment: If you don't want to instantiate a new model in the controller each time, you can pass the model (more or less) directly from the view. In you controller, have a very simple action that accepts a model as a parameter and returns the partial view. Note the HttpPost attribute.

[HttpPost]
public PartialViewResult MyPartial(MyPartialModel model)
{          
    return PartialView(model);
}

The model's got more than one property this time:

public class MyPartialModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

The partial's pretty much the same, except it now displays the new properties of the model.

@model MVCPlayGround.Models.MyPartialModel

@Html.TextBoxFor(m => m.Name)
@Html.TextBoxFor(m => m.Age)

The jquery on the main page/view is very also similar, but uses POST instead of GET.

// these could be anything, from control on the page, or whatever
var name = "James";
var age = 30;
$(document).ready(function () {
    $('#load-partial').click(function () {
        // note that Name and the Age are the names of the properties in our model
        $.post('MyPartial', { Name: name, Age: age }).done(function (data) {
            $('#section-b').html(data);
        });
    });
});

This works because when data transmitted via POST, it's treated as form data, and when the controller's deciding which action to use it'll look at the parameters for the actions, and compare them to the form data available. The MyPartialModel contains properties that match the form data, so it chooses that action. There are other subtle rules, but that's basically it. Behind the scenes it'll still be instantiating a model in the controller, it's just in the framework, not in the code you've written.