0

メイン メニューから呼び出した通常のビューで Flexigrid を表示できます。私はこのサンプルhttp://mvc4beginner.com/Sample-Code/Insert-Update-Delete/Asp-.Net-MVC-Ajax-Insert-Update-Delete-Using-Flexigrid.htmlを使用して動作させ、動作させています私にとっては結構です。

ただし、私の考えは、もう少し複雑なインターフェイスを使用することです。検索コントロールを使用して通常のビューを表示し、検索ボタンを押すと、検索したアイテムのデータをグリッドに表示します。

これまでにいくつかのことを試しましたが、うまくいきません。私が試した最新のインデックスビューは次のとおりです。

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

<h2>Clients</h2>

<br />
      @using (Ajax.BeginForm("Search", "Client",
    new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "ClientsResults"

    }))
    {
    <fieldset>
        <legend>Search</legend>
        <label for="clientNo">Client No: </label>
        <input type="number" name="searchClientNo" class="numericOnly" /><br />
        <label for="clientName">Client Name: </label>
        <input type =  "text" size =25 data-autocomplete="@Url.Action("QuickSearch", "Client")"  name ="searchClientName" />
        <div>
       <input type="submit" value="Find / Refresh" />      


            @*<input type="button" value="Find / Refresh" id="ClientsSearch" data-url="@Url.Action("Client", "Client")" />

            @*<input type="submit" value="Find / Refresh" />*@
       @*     @Ajax.ActionLink("Find / Refresh", "Client", new AjaxOptions {UpdateTargetId = "ClientResults",
           InsertionMode = InsertionMode.Replace, HttpMethod = "POST"}) *@
          @*}*@

        </div>
    </fieldset>
          <div style="padding-left:150px; padding-top:50px; padding-bottom:50px;" id="ClientsResults">
@*@{Html.RenderPartial("_Client", Model); }*@
              @*<table id="flexClients" style="display:none"/>*@


</div>
      }


@*<br />*@

コメントされたすべての試みもここで見ることができます。そのため、Clients コントローラーの Search メソッドには次のコードが含まれるようになりました。

public ActionResult Search(int? searchClientNo = null, string searchClientName = null)
        {
            // Assume we want to select everything
            var clients = Db.Clients; // Should set type of clients to IQueryable<Clients>

            if ((searchClientNo ?? 0) != 0) //Number was supplied
                clients = clients.Where(c => (c.Number == searchClientNo));

            // If clientNo was supplied, clients is now filtered by that. If not, it still has the full list. The following will further filter it.
            if (!String.IsNullOrWhiteSpace(searchClientName)) // Part of the name was supplied
                clients = clients.Where(c => (c.Name.Contains(searchClientName)));

            return PartialView("_ClientsSearch", clients);
            //return PartialView("_Client", clients);
        }

コメント付きのビューは、フレキシグリッドを持つ部分ビューであり、機能していません。_ClientsSearch ビューは、テンプレートを使用して作成された "通常の" インデックス ビューであり、これは機能します。

私が見逃しているものが正確にわかりますか？flexigrid メソッドは、そのメイン ビューから部分ビューとして使用しようとすると、まったく起動しません。

4

1 に答える 1

0

当初考えていたより複雑なシナリオはわかりませんでしたが、通常のビューを使用して機能させることができました。役立つアイデアは、最初に次のFAQから得られました： http ：//code.google.com/p/flexigrid/wiki/FAQまた、私が使用したサンプルに少し近づいています。

だから、今私のクライアントビューはこれです：

    @model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Client";
}

 <form id="frmClientsSearch">

        <label for="clientNo">Client No: </label>
        <input type="number" name="searchClientNo" class="numericOnly" /><br />
        <label for="clientName">Client Name: </label>
        <input type =  "text" size =25 value ="Please enter the search value"
            name ="searchClientName" />

       <input type="button" id="btnClientsSearch" value ="Find / Refresh" />      
</form>
<div style="padding-left: 150px; padding-top: 50px; padding-bottom: 50px;" id="ClientsResults">
    <table id="flexClients" style="display: none">
    </table>
</div>
<div style="display: none">
   <form id="sform">
        <input type="hidden" id="fntype" name="fntype">
        <input type="hidden" id="Id" name="Id">
        <label for="Number">Client No: </label>
        <input type="number" id="Number" name="Number" class="numericOnly" />
        <label for="Name">Client Name: </label>
        <input type="text" size="25" id="Name" name="Name" /><br />
        <label for="Contact11">Contact 1: </label>
        <input type="text" size="25" id="Contact1" name="Contact1" /><br />
        <div class="float-right">
            <button type="Submit" id="btnSave">Submit</button>
            <button type=reset id="btnCancel">Cancel</button>
        </div>
    </form>
</div>

そして、主な作業は.jsファイルで行われます（AddFormDataメソッドに注意してください）。

   /// <reference path = "jquery-1.5.1-vsdoc.js"/>
/// <reference path = "jquery-ui-1.8.11.js"/>

$(document).ready(function() {
    $(":input[data-autocomplete]").each(function() {
        $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
    });
});

$(function () {
    $('input[name="delete"]').click(function () {
        return confirm('Are you sure?');
    });
});

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});

    $("#flexClients").flexigrid({
        url: '/Client/Client/',
        dataType: 'json',
        colModel: [
        { display: 'Client Id', name: 'Id', width: 100, sortable: true, align: 'center', hide: true},
        { display: 'Client #', name: 'Number', width: 100, sortable: true, align: 'center' },
        { display: 'Name', name: 'Name', width: 350, sortable: true, align: 'center' },
        { display: 'Contact 1', name: 'Contact1', width: 350, sortable: true, align: 'center' },
        ],
        buttons: [
        { name: 'Add', bclass: 'add', onpress: test },
        { name: 'Edit', bclass: 'edit', onpress: test },
        { name: 'Delete', bclass: 'delete', onpress: test },
        { separator: true }
        ],
        searchitems: [
        { display: 'Client Name', name: 'Name' }
        ],
        sortname: "Name",
        sortorder: "asc",
        usepager: true,
        title: 'Clients',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 1000,
        onSubmit: addFormData,
        height: 300
    });

//This function adds parameters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit           
function addFormData() {

    //passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
    var dt = $('#sform').serializeArray();
    dt = dt.concat($('#frmClientsSearch').serializeArray());

    $("#flexClients").flexOptions({ params: dt });

    return true;
}

$('#sform').submit(function () {

    $('#flexClients').flexOptions({ newp: 1 }).flexReload();
    alert("Hello World");
    return false;
});

function test(com, grid) {
    if (com === 'Delete') {
        var clientName = $('.trSelected td:eq(2)').text();
        if (clientName) //Variable is defined and not empty
        {
            if (confirm("Are you sure you want to delete " + $.trim(clientName) + "?"))
                return false;

            $('#fntype').val('Delete');
            $('#Id').val($('.trSelected td:eq(0)').text());
            $('#Number').val('');
            $('#Name').val('');
            $('#Contact1').val('');

            $('.trSelected', grid).each(function () {
                var id = $(this).attr('id');
                id = id.substring(id.lastIndexOf('row') + 3);

                addFormData(); $('#flexClients').flexOptions({ url: '/Client/Client/' }).flexReload();
            });

            clearForm();
        }
    } else if (com === 'Add') {

        $("#sform").dialog({
            autoOpen: false,
            show: "blind",
            width: 1000,
            height: 500
        });
        $("#sform").dialog("open");

        $('#fntype').val('Add');
        $('#Number').val('');
        $('#Name').val('');
        $('#Contact1').val('');

    } else if (com === 'Edit') {

        $('.trSelected', grid).each(function () {

            $("#sform").dialog({
                autoOpen: false,
                show: "blind",
                width: 1000,
                height: 500
            });
            $("#sform").dialog("open");

            $('#fntype').val('Edit');
            $('#Id').val($('.trSelected td:eq(0)').text());
            $('#Number').val($('.trSelected td:eq(1)').text());
            $('#Name').val($('.trSelected td:eq(2)').text());
            $('#Contact1').val($('.trSelected td:eq(3)').text());

        });

    }
}

function clearForm() {    

        $("#sform input").val("");    

};

$(function () {
    $('#btnSave').click(function () {
        addFormData();
        $('#flexClients').flexOptions({ url: '/Client/Client/' }).flexReload();
        clearForm();
        $('#sform').dialog('close');
        return false;
    });
});

$(function () {
    $('#btnCancel').click(function () {      

      //  clearForm();
        $('#sform').dialog('close');
        return false;
    });
});


$(function () {
    $('#btnClientsSearch').click(function () {
        addFormData();
        $('#flexClients').flexOptions({ url: '/Client/Client/' }).flexReload();
        //$.ajax({
        //    url: $(this).data('url'),
        //    type: 'GET',
        //    cache: false,
        //    success: function (result) {
        //        $('#ClientsResults').html(result);
        //    }
        //});
        return;//false;
    });
});

また、コントローラーのClientメソッドは、以前と同じですが、わずかな変更が加えられています。

さて、私の次の課題は、上記を一般化することです。また、私が示したフォームsFormを呼び出す代わりに、作成/編集ビューからの場合と同じように、検証付きのより複雑なフォームを使用します。

于 2012-10-15T19:22:02.483 に答える