0

大きな Excel ファイルをデータベースにロードしています。アクティビティが進行中であることをユーザーに見てもらいたい。始めたけど、進め方がわからない。

  1. 私の ActionResult Index メソッドには 2 つのパラメーターがあります。JavaScript でこれを定義するにはどうすればよいですか。

  2. 送信ボタンをクリックすると、アニメーション画像が表示され、処理が完了すると停止します

  3. どういうわけかdivを非表示にする必要があることを理解しています。これを行う方法がわからない。

手伝ってください。以下は私のコードです。

    @model SampleTemplate.Models.ResultViewModel

    @{
        ViewBag.Title = "Index";
    }

    <h2>File upload section</h2>

    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <div class="uploadSection">

            <div id="divloading">
                <p style="position:absolute; top:30%; left:45%;color: Red;">
                    Excel file in process, please wait...<img src="../../Images/animated.gif" />
                </p>
            </div>
            <div>
                <p class="headerSection">Select script</p>
                <p>
                <select name = "genericId">
                        <option value="12.1">12_1_flat_goods</option>
                        <option value="12.2">12_2_mats_bm</option>                             
                </select>
                  </p>                                      
            </div>
            <div id="spacebetween">
                <p class="headerSection">Path to source file: </p>
                <p class="spacebelow"><input type="file"  name="file"  value="" /> </p>  
                <p><button id="submi" name="Submit" onclick="JavascriptFunction();">Submit</button></p>              
            </div>       
        </div>    

    }

    <script type="text/javascript" language="javascript">
        function JavascriptFunction() {
            var url = '@Url.Action("","Home")';
            $("#divLoading").show();

        }
    </script>

    ...Here is my method

     [HttpPost]
            public ActionResult Index(HttpPostedFileBase file, ResultViewModel resModel)
            {
                //code to upload excel file goes here. No need to show this.
            }
4

1 に答える 1

1

以前にこれに Knockout.js を使用したことがありますが、非常にクリーンでシンプルであることがわかりました。ここでチェックしてください：http: //knockoutjs.com/

ページは次のようになります。

ノックアウト ViewModel JavaScript ファイル -

function TestViewModel() {
    var self = this;
    self.itemsToDisplay = ko.observableArray([]);

    //this property can be used to hold the bool for when you first hit the upload button
    self.uploadStarted = ko.observable(false); // when page is loaded, this is false

    //this is a property that will hold the bool value to show/hide the gif after the upload has started
    self.uploadCompleted = ko.observable(false); // when page is loaded this is false

    ko.applyBindings(self);
};

次に、ビューに戻ります-

(注: ビューで knockout.js スクリプトを参照する必要があります)

<div data-bind="visible: !uploadCompleted() && uploadStarted()">
    // your gif image reference will go here 
    // it will only be displayed when uploadCompleted is false and uploadStarted is true
</div>
<button type="button" id="uploadButton" name="Submit">Upload</button>

<script type="text/javascript">
    var viewModel = new TestViewModel();

    // make an ajax call to your controller method to upload your content
    // on success set your loaded property to true to hide your gif
    $('#uploadButton').click(function() {
        viewModel.uploadStarted(true);

        $j.ajax({
            type: "POST",
            url: "../home/Index",
            data: ko.toJSON({ file: file, resModel: model}),
            contentType: "application/json",
            success: function (data) {
                // your controller will return your values in data

                // update your viewModel properties
                viewModel.itemsToDisplay(data);
                viewModel.uploadCompleted(true);
                viewModel.uploadStarted(false);
            }
         });
     });
</script>

それが役立つことを願っています。頑張ってください！

于 2013-07-15T20:52:54.917 に答える