Initiate update from list

Question

I've got a partial view that lists details about my entities. Details include a photo, caption, date, and name. There is an ActionLink for Delete that removes the item from the list.

I would like to make the Caption field an editable textbox to allow the user to edit the contents. Then I wold like to add an 'Update' link that will write this data to the DB. This is the only attribute that can be edited.

Basically I want to avoid the user having to open an 'Edit' form to change this field. I would like to be able to do it from within the list. Not sure how to create the 'Update' ActionLink, send it to the controller, and have the user-entered text available to the controller method.

Don't use an action link if you're deleting something! see this [Why should you delete using an HTTP POST or DELETE, rather than GET?][1] [1]: http://stackoverflow.com/questions/786070/why-should-you-delete-using-an-http-post-or-delete-rather-than-get — user3486385, Apr 01 '14 at 20:56

score 0 · Answer 1 · edited May 23 '17 at 12:23

Since it seems to be an extremely basic edit, I would just put the Caption in a Div then using CSS/jQuery display an edit button (glyphicon glyphicon-pencil) on mouseover. On click set the Div to Editable (use styling to show it's in edit mode, and only exit edit mode with a save button). On save, do a jQuery Ajax call to update the value in the database.

Please be extra cautious to not have any SQL Injection Attacks as editable content could contain anything from a user.

CSS might look like:

.editor editor-display button
{
  display: none;
}
.editor editor-display:hover .edit-button
{
  display: inline-block;
}
.editor editor-edit .edit-button
{
  display: none;
}
.editor editor-edit .save-button
{
  display: inline-block;
}

Html might look like:

<div class="my-entity editor editor-display" data-id="5" >
<div class="edit-content">@model.Caption</div>
<button id="edit-caption-button" class="edit-button" />
<button id="save-caption-button" class="save-button" />
<div>

Javascript might look like:

$(document).ready(function()
{
  $("#save-caption-button").on("click", function()
  {
    $(this).parent("editor").removeClass("editor-display").addClass("editor-edit");
  });

  $("#save-caption-button").on("click", function()
  {
    $.ajax({
      url: "/MyEditity/UpdateCaption",
      data: { id: $(this).parent(".my-entity").data("id"),
        caption: $(this).parent(".my-entity").find(".edit-content").first().text() };
    });
    $(this).parent("editor").removeClass("editor-edit").addClass("editor-display");
  });
});

Controller:

public ActionResult UpdateCaption(int id, string caption)
{
  // lookup entity by id
  // change caption value
  // save
  return new EmptyResult();
}

This is a super basic (UNTESTED!) example, with no exception handling.

That sounds like the approach I am looking for. The jquery ajax implementation is beyond me. Can you provide an example or reference to accomplish this? — Kyle Sullens, Apr 01 '14 at 20:59
This is great. The 'Save' button jquery is working as expected, but I can't get the 'edit' button to make the div editable. The javascript function is being bound to the button correctly (i put an 'alert' in, so I know it's being recognized), but the css classes are not being changed properly. — Kyle Sullens, Apr 01 '14 at 21:57

score 0 · Answer 2 · answered Apr 01 '14 at 21:07

The model that you pass to the view is of a certain type(of item in db). So, if You change the label with name "Caption" to a textbox of the same name, then the binding would remain the same - the output would be a textbox with the caption taken from the model passed to the View in Controller Action.

As for the update link: I would create an Action of the same name as the View with [HttpPost] attribute and the model as parameter. The action would be invoked by a submit button in View (so all the labels and the textbox should be enclosed in a form). Inside that action perform the db update.

So: The View should be something like this:

@model db.Foo
    @using (Html.BeginForm()) {
    <fieldset>
    @Html.LabelFor(model=>model.Name)
    (...)
    @Html.TextBoxFor(model=>model.Caption)
<input type="submit" value="Update Caption"/>
    </fieldset>
    }

and the controller actions:

//The action that passes the model to the View
public ActionResult Details()
        {
//
//get foo here
//
            return View(foo); //Where foo is the item You use for your model
        }
[HttpPost]
public ActionResult Details(foo model)
        {
//
//Update model here with model of type foo
//
        }

Hope this helps

Initiate update from list

2 Answers2