Answer to Question #186888 in Web Development for samadi

Question

Create a Website a fulfil following requirements

contain 3- 5 pages

Implement both client side and server-side

integration of following technologies

Bootstrap framework

jQuery

Ajax

JSON for communication

CRUD operations via Mongodb

Answer 1

public static class WebApiConfig 
{
    public static void Register(HttpConfiguration config) 
    {
        config.Routes.Clear();
        config.Routes.MapHttpRoute(name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional });
    }
}

 
protected void Application_Start(object sender, EventArgs e) 
{
    WebApiConfig.Register(GlobalConfiguration.Configuration);
}
 
public class Product
{
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public DateTime IntroductionDate { get; set; }
    public string Url { get; set; }
}




private List<Product> CreateMockData()
{
    List<Product> ret = new List<Product>();
    ret.Add(new Product()
    {
        ProductId = 1,
        ProductName = "Extending Bootstrap with CSS, JavaScript and jQuery",
        IntroductionDate = Convert.ToDateTime("6/11/2015"),
        Url = "http://bit.ly/1SNzc0i"
    });
    
    ret.Add(new Product()
    {
        ProductId = 2,
        ProductName = "Build your own Bootstrap Business Application Template in MVC",
        IntroductionDate = Convert.ToDateTime("1/29/2015"),
        Url = "http://bit.ly/1I8ZqZg"
    });
    
    ret.Add(new Product()
    {
        ProductId = 3,
        ProductName = "Building Mobile Web Sites Using Web Forms, Bootstrap, and HTML5",
        IntroductionDate = Convert.ToDateTime("8/28/2014"),
        Url = "http://bit.ly/1J2dcrj"
    });
    
    return ret;
}
 
[HttpGet()]
public IHttpActionResult Get() 
{
    IHttpActionResult ret = null;
    List<Product> list = new List<Product>();
    list = CreateMockData();
    ret = Ok(list);
    return ret;
}




 
<script>
  // Handle click event on Update button
  function updateClick() {
  }
  // Handle click event on Add button
  function addClick() {
  }
</script>

 
function productList() {
  // Call Web API to get a list of Product
  $.ajax({
    url: '/api/Product/',
    type: 'GET',
    dataType: 'json',
    success: function (products) {
      productListSuccess(products);
    },
    error: function (request, message, error) {
      handleException(request, message, error);
    }
  });
}

 
function productListSuccess(products) {
  // Iterate over the collection of data
  $.each(products, function (index, product) {
    // Add a row to the Product table
    productAddRow(product);
  });
}

 
function productAddRow(product) {
 // Check if <tbody> tag exists, add one if not
  if ($("#productTable tbody").length == 0) {
   $("#productTable").append("<tbody></tbody>");
  }
  // Append row to <table>
  $("#productTable tbody").append(
    productBuildTableRow(product));
}




function productBuildTableRow(product) {
  var ret =
    "<tr>" +
     "<td>" + product.ProductName + "</td>" +
     "<td>" + product.IntroductionDate + "</td>"
      + "<td>" + product.Url + "</td>" +
    "</tr>";
  return ret;
}

 
function handleException(request, message, error) {
  var msg = "";
  msg += "Code: " + request.status + "\n";
  msg += "Text: " + request.statusText + "\n";
  if (request.responseJSON != null) {
    msg += "Message" + request.responseJSON.Message + "\n";
  }
  alert(msg);
}

 
$(document).ready(function () {
  productList();
});


public IHttpActionResult Get() 
{
    IHttpActionResult ret = null;
    List<Product> list = new List<Product>();
    list = CreateMockData();
    if (list.Count > 0) 
    {
        ret = Ok(list);
    }
    else 
    {
        ret = NotFound();
    }
    return ret;
}
public IHttpActionResult Get(int id)
{
    IHttpActionResult ret;
    List<Product> list = new List<Product>();
    Product prod = new Product();
    
    list = CreateMockData();
    prod = list.Find(p => p.ProductId == id);
    if (prod == null) 
    {
        ret = NotFound();
    }
    else 
    {
        ret = Ok(prod);
    }
    
    return ret;
}
 
<button class="btn btn-default" onclick="productGet(this);"  type="button"  data-id="1">
  <span class="glyphicon glyphicon-edit"></span>
</button>

"<td>" +
  "<button type='button' " +
     "onclick='productGet(this);' " +
     "class='btn btn-default' " +
     "data-id='" + product.ProductId + "'>" +
     "<span class='glyphicon glyphicon-edit' />"
   + "</button>" +
"</td>" +