如何最好地通過ajax選項卡傳遞輸入文本字段？

有經驗的.Net開發人員，但一個完整的ASP MVC（以及一般的web開發人員）新手。我正在尋找如何完成以下任務的最佳實踐架構建議。如何最好地通過ajax選項卡傳遞輸入文本字段？

我有三個jQuery-UI標籤：第一個有一個輸入文本框：<input type="text" name="username" \>。其他人通過AJAX（隱式使用jQuery）加載不同的頁面，但需要知道這個輸入字段的值。如何從標籤2或3的ASP MVC控制器中檢索此值？這從根本上是一個壞方法？

〜/查看/共享/ _Layout.cshtml：

<!DOCTYPE html> 
<html> 
<head> 
    @Styles.Render("~/Content/themes/base/css", "~/Content/css") 
    @RenderSection("head", required: false) 
</head> 
<body> 
    @RenderBody() 
</body> 
</html>

〜/查看/演示/ Index.cshtml：

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

@section head 
{ 
    <link rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.js")"></script> 
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")"></script> 
    <script> 
     $(function() { 
      $("#tabs").tabs(); 
     }); 
    </script> 
} 

<div id="tabs"> 
    <ul> 
     <li><a href="#Tab1">Tab 1</a></li> 
     <li><a href="/Tab2">Tab 2</a></li> 
     <li><a href="/Tab3">Tab 3</a></li> 
    </ul> 
    <div id="Tab1"> 
     <p>Want to be able to get the value of the input field below from Tab2 and Tab3</p> 
     <input type="text" name="username" /> 
    </div> 
</div>

〜/控制器/ Tab2Controller.cs：

using System.Web.Mvc; 

namespace MvcApplication1.Controllers 
{ 
    public class Tab2Controller : Controller 
    { 
     public ActionResult Index() 
     { 
      // I want to replace this line with one that takes the value of 
      // the input text box and queries the model for the real data 
      ViewBag.MyList = new[] { "1", "2", "3" }; 
      return View(); 
     } 
    } 
}

〜/ Views/Tab2/Index.cshtml

@{ 
    Layout = null; 
} 

<ul> 
    @foreach (var obj in ViewBag.MyList) 
    { 
     <li>@obj</li> 
    } 
</ul>

謝謝。

來源

2012-06-05 jeebs

更改控制器操作以接收username。

public class Tab2Controller : Controller 
{ 
    public ActionResult Index(string userName) 
    { 
     // I want to replace this line with one that takes the value of 
     // the input text box and queries the model for the real data 
     ViewBag.MyList = new[] { "1", "2", "3" }; 

     return View(); 
    } 
}

更新上select事件卡舌（2 & 3）的href。

$(function() { 
    $("#tabs").tabs({ 
     select: function(event, ui) { 
      if(ui.index == 1 || ui.index == 2) // if the tab is 2 or 3. 
      { 
      // select the user name 
      var username = $("#Tab1 input[name='username']").val();         

      if(username){ 
       var url = "/Tab" + (ui.index + 1) + "?userName=" + username; 
       $("#tabs").tabs("url" , ui.index , url); 
      } 
      } 
     } 
    }); 
});

來源

2012-06-05 11:52:55 VJAI

不錯。你的JavaScript需要在這裏和那裏改變，但它的工作原理（我會在一秒鐘內編輯它）。非常感謝。 – jeebs

很高興幫助你。 – VJAI

如何最好地通過ajax選項卡傳遞輸入文本字段？

回答

相關問題