Paste values from ContentEditable fields to send to POST

2

I am making a Carousel using Bootstrap .

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

I made a classe called Template with the required information, and a classe called TemplateViewModel to be able to make a list of the data contained in the file and show in Carousel

Follow 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 Action call ManageTemplate I do the following:

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 get the data and list right in Carousel as follows:

<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>

Carousel is within <form> and atributos Html of Carousel is ContentEditable , is there any way to get the changed data and send it to Action HttpPost to save the new data in the json file?

    
asked by anonymous 20.10.2014 / 23:27

1 answer

1

Yes, just figure out how to play this within a POST command like jQuery :

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

In Controller , do:

[HttpPost]
public ActionResult MinhaActionDeSalvar(IEnumerable<Template> templates) { ... }
    
21.10.2014 / 00:15