Jqgrid Master Detail Отправить форму с использованием классов ViewModel - PullRequest
Новая
       2

Jqgrid Master Detail Отправить форму с использованием классов ViewModel

0 голосов
/ 10 марта 2012

У меня есть asp.net MVC View Page в стиле Master / Detail.
После прочтения этого я понимаю, что мне нужно сериализовать данные jqgrid перед отправкой на уровень контроллера. 

[HttpPost]
public ActionResult Detail(Seminar Seminar, List<Seminar_Detail> Seminar_Details)
{

}

Итак, мой вопрос:
1. Как я могу отправить данные в контроллер, используя 2 класса ViewModel.
SeminarMaster для полей ввода формы и SeminarDetail для целых строк Jqgrid.

2.Если вы говорите, у меня есть только один способ, который сериализует в jqgrid, то мне нужно также сериализовать поля ввода формы?

3.Если я должен использовать способ сериализации, Есть ли у меня шанс использовать ViewModel classess для анализа данных на уровне контроллера?

Обновлено

Код JqGrid или реализация уровня просмотра

Или страница сведений, которую пользователь можетсделать процесс вставки / обновления или удаления. 

@model MvcMobile.ViewModel.SeminarListDetailViewModel

@{
ViewBag.Title = "Detail";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Detail</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
    <legend>Seminar</legend>
    <table>
        <tr>
            <td>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Seminar.Seminar_Code)
                </div>
            </td>
            <td>
               <div class="editor-field">
                    @Html.EditorFor(model => model.Seminar.Seminar_Code)
                    @Html.ValidationMessageFor(model => model.Seminar.Seminar_Code)
                </div> 
            </td>
        </tr>
        <tr>
            <td>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Seminar.Title)
                </div>
            </td>
            <td>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Seminar.Title)
                    @Html.ValidationMessageFor(model => model.Seminar.Title)
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Seminar.Description)
                </div>
            </td>
            <td>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Seminar.Description)
                    @Html.ValidationMessageFor(model => model.Seminar.Description)
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Seminar.Room)
                </div>
            </td>
            <td>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Seminar.Room)
                    @Html.ValidationMessageFor(model => model.Seminar.Room)
                </div>
            </td>
        </tr>        
    </table>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>


<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
<script type="text/javascript">
jQuery(document).ready(function () {

    var AllSpeakers = (function () {
    var list = null;

    $.ajax({
        'async': false,
        'global': false,
        'url': 'GetAllSpeakers',
        'dataType': 'json',
        'success': function (data) {
            list = data;
        }
    });

        return list;
    })();



    var AllTags = (function () {
        var list = null;

        $.ajax({
            'async': false,
            'global': false,
            'url': 'GetAllTags',
            'dataType': 'json',
            'success': function (data) {
                list = data;
            }
        });

        return list;
    })();


    var lastSel = 0;
    jQuery("#list").jqGrid({
        url: '/Seminar/DetailGridData/',
        editurl: "/Seminar/MyEdit/",
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Seminar_Code', 'Speaker', 'Tag', 'DateAndTime'],
        colModel: [
                      { name: 'Seminar_Code', index: 'Seminar_Code', width: 40, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} },
                      { name: 'SpeakerID', index: 'SpeakerID', align: 'left', editable: true, edittype: "select", formatter: 'select', editoptions: { value: AllSpeakers, 
                                  dataEvents: [
                                                { type: 'change',
                                                    fn: function (e) {
                                                        //alert("Speaker change"); // For Cascading Dropdownlist Or Dependent Combo
                                                    }
                                                }
                                            ]
                                  }, editrules: { required: true}
                            },

                      { name: 'TagID', index: 'TagID', align: 'left', editable: true, edittype: 'select', formatter: 'select', editoptions: { value: AllTags }, editrules: { required: true} },
                      { name: 'DateAndTime', index: 'DateAndTime', width: 40, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} }
                 ],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'SpeakerName',
        sortorder: "desc",
        viewrecords: true,
        autowidth: true,
        autoheight: true,
        imgpath: '/scripts/themes/black-tie/images',
        caption: 'My first grid'
    })
    $("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, refresh: false, search: false });
    $("#list").jqGrid('inlineNav', '#pager', {
        addtext: "Add",
        edittext: "Edit",
        savetext: "Save",
        canceltext: "Cancel",
        addParams: {
            addRowParams: {
                // the parameters of editRow used to edit new row
                keys: true,
                oneditfunc: function (rowid) {
                    alert("new row with rowid=" + rowid + " are added.");
                }
            }
        },
        editParams: {
            // the parameters of editRow
            key: true,
            oneditfunc: function (rowid) {
                alert("row with rowid=" + rowid + " is editing.");
            }
        },
        cancelParams: {
            key: true,
            oneditfunc: function (rowid) {
                //alert("row with rowid=" + rowid + " cancel.");
            }
        }
    });

}); 
</script>

}

<div>
@Html.ActionLink("Back to List", "Index")
</div>
код уровня контроллера 
public class SeminarController : Controller
{
ISeminarListDetailRepository seminarRepository;

//
// Dependency Injection enabled constructors

public SeminarController()
    : this(new  SeminarListDetailRepository()) {
}

public SeminarController(ISeminarListDetailRepository repository)
{
    seminarRepository = repository;
}

/// <summary>
/// Just for Listing page.
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
    return View();
}

/// <summary>
/// Master Detail CRUD form according to previous form's choosen code.
/// </summary>
/// <param name="Seminar_Code"></param>
/// <returns></returns>
public ActionResult DetailByCode(string Seminar_Code)
{
    return View();
}

/// <summary>
/// Master Detail CRUD form.
/// </summary>
/// <returns></returns>
public ActionResult Detail()
{
    var SeminarListDetailViewModel = new SeminarListDetailViewModel();
    return View(SeminarListDetailViewModel);
}

/// <summary>
/// It is this method what I really focus when it comes to save all rows of jqgrid at once.
/// </summary>
/// <param name="Seminar"></param>
/// <param name="Seminar_Details"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Detail(Seminar Seminar, List<Seminar_Detail> Seminar_Details)
{            
    return View();
}       


/// <summary>
/// Just for test purpose only.
/// I will not use this method when I know how to save JQGrid's All Rows at once.
/// </summary>
/// <param name="Seminar_Detail"></param>
/// <returns></returns>
public ActionResult MyEdit(Seminar_Detail Seminar_Detail)
{
    //var seminar_Code = Seminar_Detail.Seminar_Code;
    var jsonData = new
    {

    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

public ActionResult GetAllSpeakers()
{
    string AllSpeakers = " : ;";
    var Speakers = seminarRepository.GetAllSpeakerList().Seminar_Item_Speaker;
    for (int i = 0; i < Speakers.Count; i++)
    {
        if (i == Speakers.Count - 1)
        {
            ///For the last row
            AllSpeakers += Speakers[i].SpeakerID + ":" + Speakers[i].SpeakerName;
        }
        else
        {
            AllSpeakers += Speakers[i].SpeakerID + ":" + Speakers[i].SpeakerName + ";";
        }

    }   
    return Json(AllSpeakers, JsonRequestBehavior.AllowGet);
}

public JsonResult GetAllTags()
{   
    string AllTags = " : ;";
    var Tags = seminarRepository.GetAllTagList().Seminar_Item_Tag;
    for (int i = 0; i < Tags.Count; i++)
    {
        if (i == Tags.Count - 1)
        {
            ///For the last row
            AllTags += Tags[i].TagID + ":" + Tags[i].TagName;
        }
        else
        {
            AllTags += Tags[i].TagID + ":" + Tags[i].TagName + ";";
        }

    }   
    return Json(AllTags, JsonRequestBehavior.AllowGet);
}

public ActionResult DetailGridData(string sidx, string sord, int page, int rows)
{
    int currentPage = Convert.ToInt32(page) - 1;
    int totalRecords = 0;

    var SeminarList = seminarRepository.GetSeminarDetail("CMP04").Seminar_Detail; //OrderBy(x => x.Seminar_Code).Skip(page * rows).Take(rows).ToList();

    var totalPages = (int)Math.Ceiling(totalRecords / (float)rows);
    var jsonData = new
    {
        total = totalPages,
        page,
        records = totalRecords,

        rows = (
                   from s in SeminarList
                   select new
                   {
                       id = s.Seminar_Code + "__" + s.SpeakerID + "__" + s.TagID,
                       cell = new object[]
                                        {
                                            s.Seminar_Code,
                                            s.SpeakerID,
                                            s.TagID,
                                            s.DateAndTime
                                        }
                   }).ToArray()
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

public ActionResult ListingGridData(string sidx, string sord, int page, int rows)
{
    int currentPage = Convert.ToInt32(page) - 1;
    int totalRecords = 0;

    var SeminarList = seminarRepository.AllSeminarList().Seminar_Masters; //OrderBy(x => x.Seminar_Code).Skip(page * rows).Take(rows).ToList();

    var totalPages = (int)Math.Ceiling(totalRecords / (float)rows);
    var jsonData = new
    {
        total = totalPages,
        page,
        records = totalRecords,

        rows = (
                   from s in SeminarList
                   select new
                   {
                       id = s.Seminar_Code,
                       cell = new object[]
                                        {
                                            s.Seminar_Code,
                                            s.Title,
                                            s.Description,
                                            s.Room
                                        }
                   }).ToArray()
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}
}

Обновлено 2

Пожалуйста, позвольте мне сделать мой вопрос более понятным.
У меня есть две таблицы для вставки данных одновременно.
1. SeminarMaster(Seminar_Code, Title, Description, Room)
[В Razor View] - Поля ввода формы
2. SeminarDetail(Seminar_Code, SpeakerID, TagID, DateAndTime)
[At Razor View] - Строки и столбцы JQGrid

Эти две таблицы находятся в отношении один-ко-многим.

Обновление 3
Мне очень жаль, что я снова и снова делаю мой вопрос неясным.
Теперь, пожалуйста, прочитайте мое обновление еще раз. Я старался изо всех сил, чтобы вы ясно поняли мой вопрос.

Index.cshtml Или Форма отображения в первый раз, в которой пользователь может выбрать любую строку и перейти на страницу сведений, чтобы выполнить обновление. Но на самом деле нижеописанная бритва еще не завершена.Потому что мне нужно добавить кнопки редактирования в каждой строке jqgrid. Эта кнопка «Правка» будет перенаправлять на другую страницу, которую я назвал Detail.cshtml, путем анализа выбранного кода .Я обновлю это позже.Это не моя главная проблема. 

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Seminar List</h2>

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
@Html.ActionLink("Click here", "Detail") to add new data.

<script type="text/javascript">
jQuery(document).ready(function () {        
    jQuery("#list").jqGrid({
        url: '/Seminar/ListingGridData/',
        editurl: "/Seminar/MyEdit/",
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Seminar_Code', 'Title', 'Description', 'Room'],
        colModel: [
                      { name: 'Seminar_Code', index: 'Seminar_Code', width: 40, align: 'left', editable: false },
                      { name: 'Title', index: 'Title', width: 40, align: 'left', editable: false },
                      { name: 'Description', index: 'Description', width: 40, align: 'left', editable: false },
                      { name: 'Room', index: 'Room', width: 40, align: 'left', editable: false }
                  ],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'Title',
        sortorder: "asc",
        viewrecords: true,
        autowidth: true,
        autoheight: true,            
        caption: 'Seminar List - Grid'
    })
}); 
</script>

Каждое предложение будет оценено.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...