使用jQuery從數據庫檢索數據到文本

Question

我正在嘗試在我的mvc項目中填充文本框，但缺少一些我無法理解的內容。 在我的項目中，我有一個按鈕，單擊后會打開一個彈出模型表單。 在這種形式下，我有兩個文本框。 我想填充它，所以當我打開表單文本框時，要填充我想顯示的內容。 誰能幫助我該怎么做？

我的視圖包含（.asmx）

 <table align="center">
        <tr>
            <td valign="top" class="col-label">
                Header
            </td>
            <td class="col-label">
                <textarea id="header" name="header" cols="15" rows="2"></textarea>
            </td>
        </tr>
        <tr>
            <td valign="top" class="col-label">
                Footer
            </td>
            <td class="col-label">
                <textarea id="footer" name="footer" cols="15" rows="2"></textarea>
            </td>
        </tr>
    </table>

我的控制器

   public ActionResult GetTempelateData(int locationId)
    {
        var area = _branches.GetById(locationId);
        FormTemplate data = new FormTemplate();

        data.Header= "";
        data.Footer = "";

        string query = "";
        query = @"SELECT header, footer 
                  from registration_center_template t
                       Inner Join company_template tc ON t.id = tc.template_id
                  where tc.location_id =" + locationId.ToString();
        using (SqlConnection connection = new SqlConnection(ConfigurationManager.AppSettings["appdb"]))
        {
            connection.Open();

            using (SqlCommand command = new SqlCommand(query, connection))
            {
                command.CommandTimeout = 3000;
                using (SqlDataReader reader = command.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        data.Header = reader["header"].ToString();
                        data.Footer = reader["footer"].ToString(); 
                    }
                }
            }
            connection.Close();
        }
        return View("FormTemplate", data);
    }

現在如何添加jquery將數據填充到文本框中？

Answer 1

好吧，首先，我不會在單擊按鈕時獲得表單數據，而是在具有“彈出模式表單”打開事件的情況下單擊它。 如果沒有，則應該有一個函數來處理模式的打開，在這種情況下，表單數據GET應該作為回調函數傳遞給它。

其次，我不明白為什么這里需要AJAX。 您有不斷變化的頁眉和頁腳嗎？

因此，我將首先提供我認為更合適的版本，然后提供AJAX解決方案。 **順便說一句，我更正了您的動作名稱拼寫錯誤，並且我正在使用Razor MVC

1-使用MVC（應該很容易轉換為asp.net）

@model FormTemplate
<table align="center"> 
    <tr>
        <td valign="top" class="col-label">
            Header
        </td>
        <td class="col-label">
            @Html.TextAreaFor(model => model.Header, new { cols = 15, rows = 2 })
        </td>
    </tr>
    <tr>
        <td valign="top" class="col-label">
            Footer
        </td>
        <td class="col-label">
            @Html.TextAreaFor(model => model.Footer, new { cols = 15, rows = 2 })
        </td>
    </tr>
</table>

我假設您的視圖稱為FormTemplate，在這種情況下，您已經在GetTemplateData Action GetTemplateData模型傳遞給它。

2-使用jQuery AJAX

模型

// This should actually be on a repository class
public static FormTemplate GetFormTemplateById(int locationId)
{
    string query =
            @"SELECT header, footer 
              from registration_center_template t
                   Inner Join company_template tc ON t.id = tc.template_id
              where tc.location_id =" + locationId;
    using (SqlConnection connection = new SqlConnection(ConfigurationManager.AppSettings["appdb"]))
    {
        connection.Open();

        using (SqlCommand command = new SqlCommand(query, connection))
        {
            command.CommandTimeout = 3000;
            using (SqlDataReader reader = command.ExecuteReader())
            {
                return reader.Read()
                    ? new FormTemplate
                        {
                            Header = reader["header"] as string,
                            Footer = reader["footer"] as string
                        }
                    : new FormTemplate(); // could also be null - preference;
            }
        }
    }
}

控制者

public JsonResult GetTemplateData(int locationId)
{
    return Json(FormTemplate.GetTemplateById(locationId), JsonRequestBehavior.AllowGet);

    // if FormTemplate returns null, your javascript will fail
    // could use FormTemplate.GetTemplateById(locationId) ?? new FormTemplate()
    // or on JavaScript: if (!response) return;
}

的JavaScript

$.get('@Url.Action("GetTemplateData", "Admin")',
      { locationId: @ViewData["locationID"] }
      // locationID must be an int or this will fail, either silently or explicitly
  )
  .done(function (response) {
      // if your model can be null, use:
      // if (!response) return;
      $('#header').val(response.Header);
      $('#footer').val(response.Footer);
  });