Pick values from Contenteditable fields to send in POST

Question

I’m making a Carousel using the Bootstrap.

The dados who fed this Carousel will be modified a few times, I decided to create a file dados.json to serve as the basis for these files.

I made a classe calling for Template with the necessary information, and classe calling for TemplateViewModelto be able to make a list of the data contained in the file and show in Carousel

Follows the two classes below:

public class Template
    {
        public string Titulo { get; set; }
        public string SubTitulo { get; set; }
        public string Chapeu { get; set; }
        public string UrlImage { get; set; }
        public string UrlNoticia { get; set; }
    }

    public class TemplateViewModel
    {
        public IList<Template> Carroussel { get; set; }
    }

In my Actioncalling for ManageTemplate I’ll tell you what:

public ActionResult ManageTemplate()
        {
            // Lê o arquivo dados.json
            var json = System.IO.File.ReadAllText(Server.MapPath("~/Templates/") + "dados.json");

            // Deserializa os dados json para o objeto
            var model = JsonConvert.DeserializeObject<TemplateViewModel>(json);


            // Envia o objeto para a View
            return View(model);
        }

In my View I can take the data and list it right on Carouselas follows below:

<div id="carousel-destaque" class="carousel slide" data-ride="carousel">

                @{ var count = 0;}

                <ol class="carousel-indicators">
                    @for (var i = 0; i < 4; i++)
                    {
                        <li data-target="#carousel-destaque" data-slide-to="@i" class="@(count <= 0 ? "active" : "")"></li>
                    }
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    @for (var i = 0; i < 4; i++)
                    {
                        <div class="item @(count <= 0 ? "active" : "")">
                            <div class="featured-article">
                                <a href="@Model.Carroussel[i].UrlNoticia" class="foto inner-border" contenteditable="true">
                                    <span></span>
                                    <img height="297" width="555" src="@Model.Carroussel[i].UrlImage" class="img-responsive" alt="">
                                    <div class="block-title">
                                        <div class="title">
                                            @Model.Carroussel[i].Titulo
                                        </div>
                                    </div>
                                    <div class="overlay"></div>
                                </a>
                                <div class="btn-editable hide">
                                    <a href="javascript:void(0)" class="btn btn-xs btn-success" title=""><span class="glyphicon glyphicon-ok"></span></a>
                                    <a href="javascript:void(0)" class="btn btn-xs btn-default change-url" title=""><span class="glyphicon glyphicon-link"></span></a>
                                    <a href="javascript:void(0)" class="btn btn-xs btn-primary change-pic" title=""><span class="glyphicon glyphicon-picture"></span></a>
                                </div>
                            </div>
                        </div>
                        count++;
                    }
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-destaque" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-destaque" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>

The Carouselis inside a <form> and the atributos Html of Carousel sane ContentEditable, there is some way to take the altered data and send to the Action HttpPostcorresponding to save the new data in the json file?

Answer 1

Yeah, just sort of throw it in a POST command like jQuery:

$.ajax({
  type: "POST",
  url: '/MeuController/MinhaActionDeSalvar',
  data: data, // Coloque os dados modificados aqui
  success: success,
  dataType: dataType
});

In the Controller, do:

[HttpPost]
public ActionResult MinhaActionDeSalvar(IEnumerable<Template> templates) { ... }