Простой Ajax в asp.net MVC 3, обновить модель и перерисовать часть - PullRequest
Новая
       20

Простой Ajax в asp.net MVC 3, обновить модель и перерисовать часть

3 голосов
/ 27 февраля 2012

Я пришел из более WPF приложения, и я привык к привязкам и тому подобному.Тогда переход на сайты может привести к проблемам, так как они работают намного по-другому.

Я пытаюсь выполнить простое действие Ajax, но не знаю, с чего начать.По сути, я хочу создать выпадающий список, который меняет одно свойство в модели и повторно отображает эту часть страницы.Возможно, это слишком много в WPF-способе сделать это, поэтому моя модель может быть искажена из-за того, что она должна делать.

Вот что я уже получила: 

public class TheViewModel
{
    private IEnumerable<TheData> _data;

    public TheViewModel(IEnumerable<TheData> data)
    {
        _data = data;
        Year = 2012;
    }

    public int Year { get; set; }

    public ICollection<TheData> Data
    {
        get
        {
            return _data.Where(d => d.Year == this.Year).ToList();
        }
    }

     public IEnumerable<SelectListItem> YearList
     {
        // lists the available years
     }
}

public class TheData
{
    public int Year { get; set; }
    //Some more info I want to represent in Table
}

Ибритва: 

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "thetable" }))
{
        @Html.DropDownListFor(model => model.Year, Model.YearList, new { AutoPostBack = "true"})
        <input type="submit" name="name" value="Submit" />
}


<table id="thetable">
    <thead>
        //some headers
    </thead>
    <tbody>
    @foreach ( var item in Model.Data)
    {
        //row for each data
    }
    </tbody>
</table>

Как вы можете видеть, я надеюсь, что свойство Year будет обновлено и будет сделан новый вызов для свойства Data, что приведет к появлению новой информации.Эта информация будет представлена ​​в thetable Таблица

1 Ответ

10 голосов
/ 27 февраля 2012

Вот полный пример.

Модель: 

public class MyViewModel
{
    public int Year { get; set; }
    public IEnumerable<SelectListItem> Years
    {
        get
        {
            return Enumerable.Range(1980, 40).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = x.ToString()
            });
        }
    }

    public IList<TheData> Data { get; set; }
}

public class TheData
{
    public int Year { get; set; }
    public string Foo { get; set; }
    public string Bar { get; set; }
}

Контроллер: 

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel();
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(int year)
    {
        var model = new[]
        {
            new TheData { Year = year, Foo = "foo 1", Bar = "bar 1" },
            new TheData { Year = year, Foo = "foo 2", Bar = "bar 2" },
            new TheData { Year = year, Foo = "foo 3", Bar = "bar 3" },
        };
        return PartialView("_data", model);
    }
}

Index.cshtml просмотр: 

@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#yearsddl').change(function () {
            $(this).closest('form').trigger('submit');
        });
    });
</script>

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "data" }))
{
    @Html.DropDownListFor(x => x.Year, Model.Years, new { id = "yearsddl" })
}

<table>
    <thead>
        <tr>
            <th>Year</th>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody id="data">
        @Html.Partial("_data", Model.Data ?? Enumerable.Empty<TheData>())
    </tbody>
</table>

Включение сценария jquery.unobtrusive-ajax.js должно быть удалено, например, из представления индекса внутри макета, а пользовательские js, которые подписываются на событие изменения раскрывающегося списка, должны быть перемещены в отдельный файл js и включены из макета. Я просто разместил их здесь, чтобы проиллюстрировать полный пример того, что требуется для работы представления.

_Data.cshtml частично: 

@model IList<TheData>

@for (int i = 0; i < Model.Count; i++)
{
    <tr>
        <td>@Html.DisplayFor(x => x[i].Year)</td>
        <td>@Html.DisplayFor(x => x[i].Foo)</td>
        <td>@Html.DisplayFor(x => x[i].Bar)</td>
    </tr>
}
...