CODEWITHSUNDEEP
c#ajaxasp.net-mvc
drewwyatt
drewwyatt

Reputation: 6027

How do I call a model function with Ajax (or something similar)?

I have a model that (among other things) returns a tabular representation of itself when a method - ToHtml() - is called.

LotSpace and LotRow are both models that (for brevity) I am not including. They actually make database calls, and are the reason I would like to redraw this lot using ajax calls. If they are relevant to this question I can add them.

public class Lot
{
    public List<LotSpace> Spaces;
    public List<LotRow> Rows;
    public int SpacesPerRow
    {
        get
        {
            return (Spaces.Count / Rows.Count);
        }
    }


    public Lot(int startSpace, int endSpace, int numberOfRows)
    {
        Spaces = LotSpace.ToList(startSpace, endSpace);

        /***testing*****/
        Spaces[0].Blocked = true;
        Spaces[1].Blocked = true;
        Spaces[2].Blocked = true;
        Spaces[3].Blocked = true;
        Spaces[4].Blocked = true;
        Spaces[5].Blocked = true;
        Spaces[6].Blocked = true;
        Spaces[7].Blocked = true;
        /***testing*****/

        Rows = LotRow.ToList(numberOfRows);

        LoadSpacesIntoRows();
    }

    private void LoadSpacesIntoRows()
    {
        foreach(var space in Spaces)
        {
            int rowIndex = 0;
            while(rowIndex < Rows.Count)
            {
                if(Rows[rowIndex].Spaces.Count < SpacesPerRow)
                {
                    Rows[rowIndex].Spaces.Add(space);
                    break;
                }

                rowIndex++;
            }
        }
    }

    public string ToHtml()
    {
        Table table = MapMaker.HTML.CreateTable(this);
        MapMaker.HTML.AddSpaces(table, this);
        return MapMaker.HTML.ControlToString(table);
    }
}

Right now this is called from the view like this:

Controller

public ActionResult Index()
{
    return View(new Lot(392, 1, 7));
}

View

<div class="row">
    @Html.Raw(Model.ToHtml())
</div>

This works, but under certain circumstances, I would like to be able to redraw this map. Is it possible to make an ajax call from the view so that I can redraw this portion of the view on demand without necessitating a full page reload?

Upvotes: 0

Views: 33

Answers (1)

David
David

Reputation: 218877

Yes. But AJAX doesn't "call a method on a model", it invokes a controller action. So, for example, you can create a new controller action with a new view which returns only that HTML:

public ActionResult Lot()
{
    return View(new Lot(392, 1, 7));
}

And, aside from the @model declaration, the view would just be:

@Html.Raw(Model.ToHtml())

Now you have a URL which returns just the HTML for that table and nothing else. You can fetch it using something like the jQuery load() function:

$('#yourDiv').load('@Url.Action("Lot", "YourController")');

The AJAX request is a standard HTTP request like any other. You just need an endpoint on the server to handle that request and return a response.

Upvotes: 3

Related Questions