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

Question

I am trying to populate my textboxes in my mvc project but I am missing something which I am not able to understand. In my project I have a button, upon clicking that it open a popup model form. In that form I have two textboxes. I wanted to populate that so when I open the form textbox is populated with what I wanted to show. Can anyone help on how can I do that?

my view comtains (.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>

My Controller

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

Now how can I add jquery to populate my data into textboxes?

Answer 1

Well, first of all I wouldn't get the form data on button click, but on said "popup modal form" open event, if it has one. If it doesn't, there should be a single function which handles the opening of the modal, in which case the form data GET should be passed as a callback function to it.

Secondly, I do not see why AJAX is needed here. Do you have an ever changing header and footer?

So I will provide first the version which I think is more appropriate, and after that the AJAX solution. ** By the way, I corrected your Action name typo and I'm using Razor MVC

1- Using MVC (should be easy to translate to 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>

I assume your view is called FormTemplate, in which case you are already passing the model to it on your GetTemplateData Action.

2- Using jQuery AJAX

Model

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

Controller

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