欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ASP.NET?MVC前臺動態(tài)添加文本框并在后臺使用FormCollection接收值

 更新時間:2022年08月24日 08:40:33   作者:Darren?Ji  
這篇文章介紹了ASP.NET?MVC前臺動態(tài)添加文本框并在后臺使用FormCollection接收的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

在"MVC批量添加,增加一條記錄的同時添加N條集合屬性所對應(yīng)的個體"中,對于前臺傳來的多個TextBox值,在控制器方法中通過強(qiáng)類型來接收。使用FormCollection也可以接收來自前臺的多個TextBox值。實現(xiàn)效果如下:

動態(tài)添加TextBox:

后臺使用FormCollection接收來自前臺的TextBox值,再以TempData把接收到的值返回:

當(dāng)頁面沒有TextBox,點擊"移除",提示"沒有文本框可被移除":

在HomeController中,先獲取前臺用來計數(shù)的隱藏域的值,然后遍歷,根據(jù)前臺Input的name屬性值的命名規(guī)則獲取到每個TextBox的值。

    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(FormCollection collection)
        {
            var inputCount = 0; //前端文本框的數(shù)量
            var inputValues = new List<string>();//前端文本款的值放到這個集合

            if (int.TryParse(collection["TextBoxCount"], out inputCount))
            {
                for (int i = 1; i <= inputCount; i++)
                {
                    if (!string.IsNullOrEmpty(collection["textbox" + i]))
                    {
                        inputValues.Add(collection["textbox" + i]);
                    }
                }
            }
            TempData["InputResult"] = inputValues;
            return View();
        }
    }

在Home/Index.cshtml中,通過jquery添加或移除TextBox。

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

<div>
    @if (TempData["InputResult"] != null)
    {
        <ul>
            @foreach (var item in (List<string>) TempData["InputResult"])
            {
                <li>@item</li>
            }
        </ul>
    }
</div>

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <div>
        <div id="TextBoxesGroup">
            <input type="text" id="textbox1" name="textbox1"/>
        </div>
        <hr/>
        @Html.Hidden("TextBoxCount", 1)
        <input type="button" value="添加" id="add"/>
        <input type="button" value="移除" id="remove"/>
        <input type="submit" value="提交"/>
    </div>
}

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function() {
            //默認(rèn)焦點
            $('#textbox1').focus();

            //點擊添加
            $('#add').click(function() {
                //從隱藏域中獲取當(dāng)前文本框的數(shù)量
                var currentCount = parseInt($('#TextBoxCount').val(), 10);

                //文本框數(shù)量加1
                var newCount = currentCount + 1;

                //創(chuàng)建新的文本框
                var newInput = $(document.createElement('Input')).attr({
                    "type": "text",
                    "id": "textbox" + newCount,
                    "name": "textbox" + newCount
                });

                //把新的文本框附加到區(qū)域中
                $('#TextBoxesGroup').append(newInput);

                //把當(dāng)前文本框的數(shù)量賦值到用來計數(shù)隱藏域
                $('#TextBoxCount').val(newCount);

                //把焦點轉(zhuǎn)移到新添加的文本框中來
                $('#textbox' + newCount).focus();
            });

            //點擊移除
            $('#remove').click(function() {
                //從隱藏域中獲取當(dāng)前文本框的數(shù)量
                var currentCount = parseInt($('#TextBoxCount').val(), 10);
                if (currentCount == 0) {
                    alert('已經(jīng)沒有文本框可以被移除了~~');
                    return false;
                }
                //移除當(dāng)前文本框
                $('#textbox' + currentCount).remove();

                //把新的文本框計數(shù)賦值給隱藏域
                var newCount = currentCount - 1;
                $('#TextBoxCount').val(newCount);
            });
        });
    </script>
}

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

相關(guān)文章

  • .NET Core簡單讀取json配置文件

    .NET Core簡單讀取json配置文件

    這篇文章主要為大家詳細(xì)介紹了.NET Core簡單讀取json配置文件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-03-03
  • ASP.NET 使用application與session對象寫的簡單聊天室程序

    ASP.NET 使用application與session對象寫的簡單聊天室程序

    寫了快一年的asp.net,application對象還真沒怎么用過??戳丝磿?,根據(jù)這兩個對象的特性寫了一個簡單的聊天室程序。真的是非常的簡陋
    2014-07-07
  • ASP.NET Core開發(fā)教程之Logging利用NLog寫日志文件

    ASP.NET Core開發(fā)教程之Logging利用NLog寫日志文件

    一直很喜歡 NLog 的簡潔和擴(kuò)展性,所以下面這篇文章主要給大家介紹了關(guān)于ASP.NET Core開發(fā)教程之Logging利用NLog寫日志文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2018-07-07
  • asp.net repeater實現(xiàn)批量刪除

    asp.net repeater實現(xiàn)批量刪除

    asp.net repeater實現(xiàn)批量刪除實現(xiàn)效果代碼
    2009-03-03
  • ajax.net對數(shù)據(jù)庫的插入實例

    ajax.net對數(shù)據(jù)庫的插入實例

    ajax.net對數(shù)據(jù)庫的插入實例,需要的朋友可以參考一下
    2013-04-04
  • 詳解.net core日記記錄

    詳解.net core日記記錄

    這篇文章主要介紹了.net core的日記記錄,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • ASP.NET AJAX 1.0 RC開發(fā)10分鐘圖解

    ASP.NET AJAX 1.0 RC開發(fā)10分鐘圖解

    12月15日,ASP.NET AJAX 1.0 RC版發(fā)布,我下載安裝試用了一下,沒有寫一行代碼,實現(xiàn)了一個簡單的AJAX應(yīng)用,以下為截圖說明。
    2008-03-03
  • .NET Core中創(chuàng)建和使用NuGet包的示例代碼

    .NET Core中創(chuàng)建和使用NuGet包的示例代碼

    這篇文章主要介紹了.NET Core中創(chuàng)建和使用NuGet包的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • C#實現(xiàn)Web文件上傳的兩種方法實例代碼

    C#實現(xiàn)Web文件上傳的兩種方法實例代碼

    在Web編程中,我們常需要把一些本地文件上傳到Web服務(wù)器上,上傳后,用戶可以通過瀏覽器方便地瀏覽這些文件,應(yīng)用十分廣泛。
    2013-07-07
  • ASP.NET Core MVC在視圖中使用依賴注入

    ASP.NET Core MVC在視圖中使用依賴注入

    這篇文章介紹了ASP.NET Core MVC在視圖中使用依賴注入的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-04-04

最新評論