使用jquery从数据库检索数据到文本

时间:2016-12-15 18:21:42

标签: c# jquery asp.net-mvc

我正在尝试在我的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来将我的数据填充到文本框中?

1 个答案:

答案 0 :(得分:0)

好吧,首先我不会在按钮点击时获得表单数据,但是在所谓的“弹出模式表单”打开事件中,如果它有一个。如果没有,则应该有一个函数来处理模态的打开,在这种情况下,表单数据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操作上将模型传递给它。

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);
  });